刪除動態添加的行后遞減行 ID 和輸入 ID 和輸入名稱

Question

新手在這里，我有一個動態添加行function。 我的目標是在刪除行 ID 和名稱后減少它。 我遇到的問題是每當我刪除一行時，當我添加新行時，id 和 name 會不斷增加。 它應該重置或減少。 我在下面提供了我的代碼和屏幕截圖以獲取更多解釋。 太感謝了。

 var rowIndex = 0; var rowIndexx = 1; $("#addrow").on('click', function() { rowIndex++; rowIndexx++; var newRow = '<tr><td><input type="text" value="' + rowIndexx + '" /></td>"' + '<td><input id="lightBand' + rowIndex + '" name="lightBand' + rowIndex + '" type="number" /></td>"' + '<td><input id="weight' + rowIndex + '" name="weight' + rowIndex + '" type="number" /></td>"' + '<td><input id="wingBand' + rowIndex + '" name="wingBand' + rowIndex + '" type="number" /></td>"' + '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>'; $("#applicanttable > tbody > tr:last").after(newRow); }); // I'm missing something here, when I delete, the id and name should be decremented by 1. $(document).on('click', '.removerow', function() { $(this).parents('tr').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered" border="1" id="applicanttable"> <thead> <tr> </tr> </thead> <tbody> <div class="row"> <tr> <th>#</th> <th>LB#</th> <th>Weight#</th> <th>Wingband #</th> <th>Action</th> </tr> <tr id="row_0"> <td> <input id="#" name="#" type="text" value="1" readonly /> </td> <td class="labelcell"> <input id="lightBand" name="lightBand" type="number" value="" class="auto"/> </td> <td class="labelcell"> <input id="weight" name="weight" type="number" /> </td> <td class="labelcell"> <input id="wingBand" name="wingBand" type="number" /> </td> <td class="labelcell"> <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" > </td> </tr> </div> </tbody> </div> <tfoot> <tr> </tr> <tr> <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button> </tr> </tfoot> </table>

Answer 1

添加新行時發生的情況是將最左側輸入的值設置為rowIndexx的當前值。 一旦將其設置為該值，它將永遠保持該值，無論rowIndexx的值發生什么變化。 如果您希望 id 始終從 1 計數到 2 到 3 等等，您應該重置單擊偵聽器回調中的字段。

Answer 2

在輸入字段中添加 Class auto_num ，顯示索引為 no，並在通過此 class 刪除行循環后，您可以獲得該 class 的總數。 這實際上是沒有行並在該輸入字段中顯示它的計數。

 //var rowIndex = 0; //var rowIndexx = 1; $("#addrow").on('click', function(){ let rowIndex = $('.auto_num').length+1; let rowIndexx = $('.auto_num').length+1; var newRow = '<tr><td><input class="auto_num" type="text" value="'+rowIndexx+'" /></td>"' + '<td><input id="lightBand'+rowIndex+'" name="lightBand'+rowIndex+'" type="number" /></td>"' + '<td><input id="weight'+rowIndex+'" name="weight'+rowIndex+'" type="number" /></td>"' + '<td><input id="wingBand'+rowIndex+'" name="wingBand'+rowIndex+'" type="number" /></td>"' + '<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>'; $("#applicanttable > tbody > tr:last").after(newRow); }); // I'm missing something here, when I delete, the id and name should be decremented by 1. $(document).on('click', '.removerow', function() { $(this).parents('tr').remove(); regenerate_auto_num(); }); function regenerate_auto_num(){ let count = 1; $(".auto_num").each(function(i,v){ $(this).val(count); count++; }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered" border="1" id="applicanttable"> <thead> <tr> </tr> </thead> <tbody> <div class="row"> <tr> <th>#</th> <th>LB#</th> <th>Weight#</th> <th>Wingband #</th> <th>Action</th> </tr> <tr id="row_0"> <td> <input id="#" name="#" class="auto_num" type="text" value="1" readonly /> </td> <td class="labelcell"> <input id="lightBand" name="lightBand" type="number" value="" class="auto"/> </td> <td class="labelcell"> <input id="weight" name="weight" type="number" /> </td> <td class="labelcell"> <input id="wingBand" name="wingBand" type="number" /> </td> <td class="labelcell"> <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" > </td> </tr> </div> </tbody> </div> <tfoot> <tr> </tr> <tr> <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button> </tr> </tfoot> </table>