如何保持序列號與動態添加/刪除html表中的序列保持一致？

Question

我有一個像下面這樣的表格，它的行可以使用添加/刪除按鈕來添加和刪除。

<table class="dynatable"> 
    <thead> 
     <tr> 
      <th><button class="add">Add</button></th> 
     </tr> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Col 3</th> 
      <th>Col 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="prototype"> 
      <td><input type="text" name="id[]" value="0" class="id" /></td> 
      <td><input type="text" name="name[]" value="" /></td> 
      <td><input type="text" name="col4[]" value="" /></td> 
      <td><input type="text" name="col3[]" value="" /></td> 
     </tr> 
    </tbody> 
</table> 

表中的第一列包含序列號。但是，當行之間被刪除時，它正在失去其序列。

例如，如果有行5列的1,2,3,4,5

如果爲3的序列號的行被刪除的序列的序列號將失去1個串行序列， 2,4,5

但我想在第一列中的序列號，以保持像1,2,3,4的順序從五行移除一行後

如果我加5行刪除所有行並開始再次添加行。序列從6開始，而不是從1開始。

我該如何使用jQuery來做到這一點？

Answer 1

我會重新計算，當事情是這樣刪除的整個序列：

http://jsfiddle.net/5HCVX/16/

function recalcId(){ 
    $.each($("table tr.item"),function (i,el){ 
     $(this).find("td:first input").val(i + 1); // Simply couse the first "prototype" is not counted in the list 
    }) 
} 

而且當事情被刪除只是decresse的id

Answer 2

您可以簡單地在編輯記錄後在一個循環中設置新的記錄ID。你能從這個表中獲得一系列記錄嗎？

Answer 3

$(document).ready(function() { 
      var id = 0; 

      // Add button functionality 
      $("table.dynatable button.add").click(function() { 
       id++; 
       var master = $(this).parents("table.dynatable"); 

       // Get a new row based on the prototype row 
       var prot = master.find(".prototype").clone(); 
       prot.attr("class", id + " item") 
       prot.find(".id").attr("value", id); 

       master.find("tbody").append(prot); 
       prot.append('<td><button class="remove">Remove</button></td>'); 
      }); 

      // Remove button functionality 
      $("table.dynatable button.remove").live("click", function() { 
       $(this).parents("tr").remove(); 
       id--; //simon was missing this now it's perfect 
       recalcId(); 
      }); 
     }); 

function recalcId(){ 
    $.each($("table tr.item"),function (i,el){ 
     $(this).find("td:first input").val(i + 1); // Simply couse the first "prototype" is not counted in the list 
    }) 
} 
​ 

Answer 4

我覺得size（）函數在這裏可能很有用。以您的代碼，我添加了行

id = $('table.dynatable tbody tr').size() -1 

。 。 。到「刪除按鈕」功能。所以整個JS現在是：

$(document).ready(function() { 
      var id = 0; 

      // Add button functionality 
      $("table.dynatable button.add").click(function() { 
       id++; 
       var master = $(this).parents("table.dynatable"); 

       // Get a new row based on the prototype row 
       var prot = master.find(".prototype").clone(); 
       prot.attr("class", id) 
       prot.find(".id").attr("value", id); 

       master.find("tbody").append(prot); 
       prot.append('<td><button class="remove">Remove</button></td>'); 
      }); 

      // Remove button functionality 
      $("table.dynatable button.remove").live("click", function() { 
       $(this).parents("tr").remove(); 
       id = $('table.dynatable tbody tr').size() -1; 
      }); 
     });