行を削除した後のテーブル内のシフトインデックスの参照

Question

すべてのラベル/入力IDとTR IDにインデックスを持つ要素と、削除ボタンがあります。 [削除]をクリックすると、その行が削除され、下のすべての参照を1つ上（-1）シフトする必要があります。

私たちは手動シフトを理解しようとすることができますが、より簡単な方法はありますか？

影響を受ける索引を含むアイテム：TR、すべてのラベルのID、すべての入力ID、すべての入力名

HTML：

<tr id="period0"> 
    <td> 
     <label for="budgetPeriod0">Enter the Budget Period number.</label> 
     <input id="budgetPeriod0" name="name_period_0" /> 
    </td> 
    <td> 
     <label for="amount0">Enter the amount.</label> 
     <input id="amount0" name="name_amount_0"> 
    </td> 
</tr> 

jQueryのTR（実装）Shiftキーを（実装されていない）削除：

removeRecord : function(index) { 
      var v= "tr:eq("+index+")"; 
      $("#incomeTable >tbody").find(v).remove(); 

      var id = "#period"+index; 
      $(id).nextAll().each(function(i){ 
       //shifting logic goes here 

      }); 

Answer 1

削除の呼び出し方法がわかりません。私はちょうど行の削除の全体のテーブルを再インデックスするでしょう...

インデックスがあなたのID /名前に組み込まれることは私には奇妙なものです。

$(function() { 
 
    reindex(); 
 
}); 
 

 
function removeRecord(index) { 
 
    var v = "tr:eq(" + index + ")"; 
 
    $("#incomeTable >tbody").find(v).remove(); 
 

 
    reindex(); 
 

 
} 
 

 
function reindex() { 
 
    var $row; 
 
    $.each($("#incomeTable>tbody>tr"), function(idx, elem) { 
 
    $row = $(elem); 
 
    $row.attr("id", $row.attr("id").replace(/\d+/, idx)); 
 
    $.each($row.find("[for]"), function(i, label) { 
 
     $(label).attr("for", $(label).attr("for").replace(/\d+/, idx)); 
 
    }); 
 
    $.each($row.find("[id]"), function(i, input) { 
 
     $(input).attr("id", $(input).attr("id").replace(/\d+/, idx)); 
 
    }); 
 
    $.each($row.find("[name]"), function(i, input) { 
 
     $(input).attr("name", $(input).attr("name").replace(/\d+/, idx)); 
 
    }); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="incomeTable"> 
 
    <tbody> 
 
    <tr id="period0"> 
 
     <td> 
 
     <label for="budgetPeriod0">Enter the Budget Period number.</label> 
 
     <input id="budgetPeriod0" name="name_period_0" /> 
 
     </td> 
 
     <td> 
 
     <label for="amount0">Enter the amount.</label> 
 
     <input id="amount0" name="name_amount_0"> 
 
     </td> 
 
    </tr> 
 
    <tr id="period0"> 
 
     <td> 
 
     <label for="budgetPeriod0">Enter the Budget Period number.</label> 
 
     <input id="budgetPeriod0" name="name_period_0" /> 
 
     </td> 
 
     <td> 
 
     <label for="amount0">Enter the amount.</label> 
 
     <input id="amount0" name="name_amount_0"> 
 
     </td> 
 
    </tr> 
 
    <tr id="period0"> 
 
     <td> 
 
     <label for="budgetPeriod0">Enter the Budget Period number.</label> 
 
     <input id="budgetPeriod0" name="name_period_0" /> 
 
     </td> 
 
     <td> 
 
     <label for="amount0">Enter the amount.</label> 
 
     <input id="amount0" name="name_amount_0"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>