从 html table 中的项目详细信息中删除项目时如何更新编号规则列

Question

我正在制作一张发票，其中的订单有多个产品订单详细信息 table，其中包含产品列序列号的编号。对于用户添加的每个产品行，当用户在其中添加一些产品详细信息行时，此代码会自动更新产品列序列的数量：

var n = $(".detail tr").length-0)+1;
var tr = '<td class="no">'+ n +'</td>'

当用户想要删除添加行之间的产品详细信息之一时，编号。序列列未更新我该怎么做？

Answer 1

 $(function()
 {
      // Add Row
  $("#add").click(function()
  {
   addnewrow();
  });
      
      // Remove Row
       $("body").delegate('#remove','click',function()
  {
   $(this).parent().parent().remove();
  }); 
      
    });
 function addnewrow()
 {
  var tr = '<tr>' +
                   '<td class="count"></td>'+
                    '<td><input type="text" class="productname"></td>'+
                    '<td><input type="button" value="-" id="remove"></td>'+
                  '</tr>'
  $(".detail").append(tr);
 }

body {counter-reset:section;}
.count:before
{
counter-increment:section;
content:counter(section);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
  <thead>
      <tr>
    <th><input type="button" value="+" id="add"></th>  
      </tr>
  </thead>
  <tbody class="detail">
    <tr>
      <td class="count"></td>
       <td><input type="text" class="productname"></td>
       <td><input type="button" value="-" id="remove"></td>
    </tr>
  <tbody>
</table>

Answer 2

//Update Name attribte Increment in each row
$('#dataTable tbody tr').each(function () {
    var this_row = $(this);
    var rowIndex = this_row.index();
    $.each(this_row.find(':input'), function (i, val) {
        var oldName = $(this).attr('name');
        var newName = oldName.replace(/\d+/, rowIndex);
        $(this).attr('name', newName);
    });
});

从 html table 中的项目详细信息中删除项目时如何更新编号规则列

How to update number sequence column when remove item from item detail in html table

html

jquery

html-table

sequence