0

5行のテーブルがあります。行を動的に追加および削除する機能が必要です。すべての行には、その特定の行を削除するための3 つの列、partNO、quantityおよび aがあります。buttonすべての行には、行の内側idと同様に があります。td

私の質問は、2 番目の行が削除された場合です。id連続する行の s は、テーブルの最後まで 1 ずつ減らす必要があります。

<tr id='1'>
    <td><input type="button" id="b1" width="10" value="D"/></td>    
    <td align="center" id='l1'><input type="text" id="t1"></td>
    <td align="center" id='r1'><input type="text" id="q1"></td>
</tr>
<tr id='2'>
    <td><input type="button" id="b2" width="10" value="D"/></td>    
    <td align="center" id='l2'><input type="text" id="t2"></td>
    <td align="center" id='r2'><input type="text" id="q2"></td>
</tr>
<tr id='3'>
    <td><input type="button" id="b3" width="10" value="D"/></td>    
    <td align="center" id='l3'><input type="text" id="t3"></td>
    <td align="center" id='r3'><input type="text" id="q3"></td>
</tr>
<tr id='4'>
    <td><input type="button" id="b4" width="10" value="D"/></td>    
    <td align="center" id='l4'> <input type="text" id="t4"></td>
    <td align="center" id='r4'><input type="text" id="q4"></td>
</tr>
<tr id='5'>
    <td><input type="button" id="b5" width="10" value="D"/></td>    
    <td align="center" id='l5'><input type="text" id="t5"></td>
    <td align="center" id='r5'><input type="text" id="q5"></td>
</tr>

そのonclickため、 ofb2 tr id=2を完全に削除し、それに応じて次の行 ID を減らす必要があります。ボタンの ID をtr td変更する必要があります。これについて何か助けはありますか？

4

1 に答える 1

0

これは、特に特定の要素にバインドされたイベントがある場合は、少し面倒です。このようなものがあなたが望むものです：

$("button").on('click', function () {
   var $toRemove = $(this).closest('tr');
   var id = $toRemove.attr('id');
   $toRemove.removeAttr('id');

   $toRemove.nextAll().each(function () {
      this.id = id++;
      //also update td IDs
   });
});
于 2012-12-03T13:32:43.933 に答える