从html表中的项目详细信息中删除项目时如何更新数字序列列

时间:2015-10-15 22:37:42

标签: jquery html html-table sequence

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

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

当用户想要删除添加的行之间的产品细节之一时。序列列没有更新我怎么做?

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

//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);
    });
});