修复动态表中的编号

Question

我有动态的html表。 当我按下添加按钮。 表格附加了一个新行。 每行都有一个取消按钮来自行删除。

问题是在删除并添加新行之后。 编号不正确。 “文本列”中的值也不正确（不正确的顺序）。

这是我的脚本：

HTML：

<input type="button" value="Add" id="btn_add" style="font-weight:bold" /><br />

<table id="t_output" border="1">
<tr class="info">
<td><strong>No</strong></td>
<td><strong>Text</strong></td>
<td><strong>Action</strong></td>
</tr>
</table> 

jQuery的：

$("#btn_add").click(function() {
    var rowCount = $("#t_output tbody tr").length;

    c_no  = "<td>" + rowCount + " </td>";
    c_txt = "<td>TEXT" + (999 - rowCount) + "</td>";
    c_act = "<td align = 'middle'><input type='button' value='Cancel' id='del_btn' class='btn btn-danger' /></td>";

    t_rows = "<tr>" + c_no + c_txt + c_act + "</tr>";
    $("#t_output tbody").append(t_rows);
});

$('#t_output').on('click', '#del_btn', function() {
    $(this).closest('tr').remove();
})

和小提琴： https ： //jsfiddle.net/9fujvb21/

如果是posibble，我宁愿不要更改代码。 谢谢您的帮助

Answer 1

这是一种方法：

function reCalculate() {
   $('#t_output tr:not(.info)>td:first-child').each(function(i) {
      $(this).text(i+1);
   });
}

我写了这个函数来计算在调用时为所有行分配新数字。 现在，只要我们需要重新计算并为行分配数字，我们就会调用此函数。

这是更新的小提琴 。

---

UPDATE

function reCalculate() {
  $('#t_output tr:not(.info)').each(function(i) {
    $(this).find('td:first-child').text(i+1).next().text('TEXT'+(999-i));
  });
}

这是更新的小提琴 。