javascript - PHP中如何动态持续增加html表的数量

Question

我有一个 html 表，从数据库中检索数据，之后我可以添加新行来输入数据，但编号不会继续最后一个数字，我的问题是如何增加表的编号，请参阅图片: /image/R6CbE.jpg

这是我的 JavaScript，当按钮 + 单击新行时将附加到表格

$('#btn_add_dependents').click(function(){
var i = 0;
i +=1;
$('#tbl_dependents_info').append(
'<tr class="odd"><td style="margin-left:10px;text-align:center;" class="no"></td> '
+'<td style="text-align:center;"><input id="dependents_name' + i + '" name="dependents_name[]" type="text" size="15" ></td>'
+'<td style="text-align:center;"><select  id="dependents_gender'+ i + '" name="dependents_gender[]">'
+'<option value="1">Male</option>'
+'<option value="2">Female</option></select></td>'
+'<td style="text-align:center;"><select  id="dependents_relationship'+ i + '" name="dependents_relationship[]">'+ relationship +'</select></td>'
+'<td style="text-align:center;"><input id="dependents_occupation' + i     + '" name="dependents_occupation[]" type="text" size="15" ></td>'
+'<td style="text-align:center;"><input id="dependents_dob' + i + '" name="dependents_dob[]" type="date" ></td>'
+'<td style="text-align:center;"><input id="dependents_remark' + i + '" name="dependents_remark[]" type="text" size="20" ></td>'
+'<td style="text-align:center;"><img src="images/subtract.png" style="height:20px;" id="del" ></td>'
+'</tr>');
updateRowOrder();
return false;
 });

  function updateRowOrder() {
    $('td.no').each(function (i) { 
       $(this).text(i + 1);
    });

}

$( document ).on( "click", "#del", function() {
 $(this).parent().parent().remove();
 updateRowOrder();
});
 });

这是从数据库中检索数据并放入html表格的功能

$sql="SELECT name,gender,cust_dependent.relationship as relationship_id,relationship.relationship,occupation,d_o_b,remark
FROM cust_dependent 
INNER JOIN relationship ON relationship.id = cust_dependent.relationship
WHERE cust_id = $customer_id AND createdby = $user_id "; 
$query=$db->query($sql);
while ($row=$db->fetch_assoc($query)){
    $i++;
    $name=$row['name'];
    $gender=$row['gender'];
    $relationship_id = $row['relationship_id'];
    $relationship=$row['relationship'];
    $occupation=$row['occupation'];
    $d_o_b=$row['d_o_b'];
    $remark=$row['remark'];
    $relationship=$slctrl->getSelectRelationship($relationship_id);
    echo<<<EOF
    <tr>
    <td style="text-align:center;">$i</td>
    <td class="odd" style="text-align:center;"><input id="dependents_name$i" name="dependents_name[]" type="text" size="15" value="$name"></td>
    <td class="odd" style="text-align:center;"><select id="dependents_gender$i" name="dependents_gender[]">
                                        <option value="1" $male>Male</option>
                                        <option value="2" $female>Female</option></select></td>
    <td class="odd" style="text-align:center;"><select  id="dependents_relationship$i" name="dependents_relationship[]">$relationship</select></td>
    <td class="odd" style="text-align:center;"><input id="dependents_occupation$i" name="dependents_occupation[]" type="text" size="15" value="$occupation" ></td>
    <td class="odd" style="text-align:center;"><input id="dependents_dob$i" name="dependents_dob[]" type="date" value="$d_o_b"></td>
    <td class="odd" style="text-align:center;"><input id="dependents_remark$i" name="dependents_remark[]" type="text" size="20"value="$remark" ></td>

    EOF;}}

我现在可以添加行，但是编号错误，它将从1开始，如何让它成为最后一行的连续编号？ps:最后一行数据是从数据库中检索的。

Answer 1

您需要保留该值(此处的值表示 html 表中存在的行数)。当您从数据库检索行时，然后将计数保存在某个变量中，例如$count。在 html 输入字段中设置此 $count 变量(使其隐藏)为

< input type="hidden" id="table-count" value="$count">

在jquery中在添加行时，执行

$currentRowNo = parseInt($('#table-count').val())++; //get value

$('#table-count').val($currentRowNo) // update value

while deletion, simply subtract the value

$currentRowNo = parseInt($('#table-count').val())--; //get value

$('#table-count').val($currentRowNo) // update value