jQuery動的id rearange

Question

私はテーブル行のためのストレートIDの数値を取得しようとしています。例えば

あなたは、行IDは1からあるべき5つの行を持つテーブルがある場合 - 5.

をしかし、私は、ユーザーが削除したときに行が追加されたり、問題を削除することができ、動的テーブルが来る持っているので、真ん中のどこかの行。

のは、あなたがテーブル

row-1 
row-2 
row-3 

に3つの新しい行を追加し、2番目の行を削除する場合は、

row-1 
row-3 

で終わるだろうと言ってみましょう、あなたは（新しい行を追加する場合、私は取得していますので、前の行のID）

row-1 
row-3 
row-4 

この問題を回避するにはどうすればよいですか？行IDを動的に再配置する方法

中間で削除された行がない場合、追加は問題ではないので、これは行の削除とバインドする必要があると思います。

FIDDLEの例を示します。 IDはあなたが新しいIDを設定する.attr()コールバック関数と共にGTセレクタを使用して、インデックス1から行をターゲットにすることができ、インデックス1から行のIDを再配置するためのコードを記述する必要があり、Webブラウザで

Answer 1

属性検査：

$('#t1 tr:gt(0)').attr('id',function(i,o){ 
    return "r"+ i++ ; 
}); 

Working Demo

Answer 2

次を使用することができます。

var rows = $('#t1 tr') // get the amount of rows 

$.each(rows, function(i, e) { 
    $(e).attr("id", "r" + i);// set the new id 
}) 

$(document).on('click', '#addRow', function() { 
 
    var row = parseInt($('#t1 tr:last-child').attr('id').replace(/[^\d]/g, ''), 10) + 1; 
 
    $('#t1').append('<tr id="r' + row + '"><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr>'); 
 

 
    var rows = $('#t1 tr') 
 

 
    $.each(rows, function(i, e) { 
 
    $(e).attr("id", "r" + i); 
 
    }) 
 
}); 
 

 
$(document).on('click', '.deleteRow', function() { 
 
    var row = parseInt($(this).closest('tr').attr('id').replace(/[^\d]/g, ''), 10); 
 

 
    if (row > 1) { 
 
    $('#r' + row).remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="t1"> 
 
    <tr> 
 
    <th>Item</th> 
 
    <th>Quantity</th> 
 
    </tr> 
 
    <tr id="r1"> 
 
    <td> 
 
     <input name="item[]" type="text" /> 
 
    </td> 
 
    <td> 
 
     <input name="quantity[]" type="number" /> 
 
    </td> 
 
    <td> 
 
     <button class="deleteRow">X</button> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<button id="addRow">Add Row</button>