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

时间:2015-08-18 06:37:13

标签: javascript php jquery html

我有一个html表,从数据库中检索数据后我可以添加新行输入数据但是数字不会继续上一个数字,我的问题是如何增加表的编号,请参阅图片:http://imgur.com/quB1R2G

这是我的javascript按钮+点击新行后会附加到表格

data_env <- loading("test.RData")
ls.str(data_env)
## x :  int [1:10] 1 2 3 4 5 6 7 8 9 10
## y :  num [1:10] 0.6843 0.6922 0.3194 0.0588 0.0146 ...
## z :  chr [1:26] "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" ...

这是从数据库中检索数据并放入html表

的功能
$('#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();
});
 });

$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>

我现在可以添加行但编号错误,它将从1开始,如何让它成为最后一行的继续编号? ps:从数据库中恢复最后一行数据。

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

尝试:

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

答案 2 :(得分:0)

尝试从数据库中获取的最后一个索引值中单击 + 按钮来增加索引值。

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