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

How to dynamic continues increase the number of html table in PHP

本文关键字：html 增加 PHP 动态      更新时间：2023-09-26

我有一个html表，数据是从数据库检索后，我可以添加新行输入数据，但编号不会继续最后一个数字，我的问题是如何增加表的编号，请参阅图片:https://i.stack.imgur.com/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:从数据库检索最后一行数据

您需要保留该值(这里的值表示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

尝试:

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

尝试增加你的索引值点击+按钮从最后一个索引值你从数据库。

您可以保留从数据库中获得的最后一个索引值，并在每次点击+按钮时更新此值。

相关文章：