gene b. gene b. - 1 year ago 84
jQuery Question

Shift Index References in Table after Removing Row

We have a table with elements having an index on every Label/Input and TR ID, and a Remove button. When Remove is clicked, that row is deleted, and all the references below have to be shifted by 1 upward (-1).

We can try to figure out the manual shifting, but is there an easier way?

Affected Index-Including Items: TR, Every Label ID, Every Input ID, Every Input Name

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 Delete TR (implemented) Shift (Not Implemented):

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 Source

I am not sure how you are calling remove. I would just reindex the whole table on removal of a row...

It does strike me as odd that the index is built into your id/names.

$(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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download