jeepers_creepers jeepers_creepers - 1 month ago 10
HTML Question

Replace table row number with the number next to the last table row

I am adding rows via onclick button. I have no issues with adding/appending rows to the last table row and deleting each. My problem is, how can I make the row number to be always next to the last?

My code for adding rows:

var id_age;
function AddRow() {
var rowCount = $('#dependent_table tbody tr').length;
id_age = 'age_dependent_'+ rowCount;
$("#dependent_table").append( "<tr>"+ "<td class='vert-align' style='width:45%;'><input type='text' class='form-control' name='name_dependent["+rowCount+"]' id='name_dependent_" + rowCount + "'></td>"+ "<td class='vert-align' style='width:10%;'><input type='text' class='form-control' name='age_dependent["+rowCount+"]' id='"+id_age+"' disabled></td>"+ "<td class='vert-align' style='width:35%;'><div class='col-md-12'><div class='form-group has-feedback' style='margin-top:12px;'><input class='form-control datePick' id='dob_dependent_"+ i +"' name='dob_dependent["+rowCount+"]' placeholder='YYYY-MM-DD' data-date-format='yyyy-mm-dd' type='text' onchange=\"CalculateAge(this.value,'" + id_age + "');\"/><i class='glyphicon glyphicon-calendar form-control-feedback'></i></div></div></td>"+ "<td class='vert-align' style='width:10%;'><button type='button' class='btn btn-danger btnDelete'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></td>"+ "</tr>");
rowCount++;
$(".btnDelete").bind("click", Delete);
}

function Delete(){
var par = $(this).parent().parent(); //tr
par.remove();
}


Example:

<tr id="dep_row_1">
<td><input type="text" name="name_dependent[1]" value="value1"></td>
</tr>
<tr id="dep_row_2">
<td><input type="text" name="name_dependent[2]" value="value2"></td>
</tr>
<tr id="dep_row_3">
<td><input type="text" name="name_dependent[3]" value="value3"></td>
</tr>
<tr id="dep_row_4">
<td><input type="text" name="name_dependent[4]" value="value4"></td>
</tr>


If I delete a row in the middle:

<tr id="dep_row_3">
<td><input type="text" name="name_dependent[3]" value="value3"></td>
</tr>


Then the table should now be:

<tr id="dep_row_1">
<td><input type="text" name="name_dependent[1]" value="value1"></td>
</tr>
<tr id="dep_row_2">
<td><input type="text" name="name_dependent[2]" value="value2"></td>
</tr>
<tr id="dep_row_3">
<td><input type="text" name="name_dependent[3]" value="value4"></td>
</tr>


where dep_row_4 became dep_row_3 and so on.

Is this possible?

With my current code, when I have a total of 5 rows and I deleted the 4th row, The id of the last row is still 5 which should be 4.

Your help is highly appreciated.

Thanks!
-Eli

Answer

What you can do is grab the id of the current row, select the subsequent row and iterate through them using jQuery's nextAll and perform the updates you need.

Edit: Update to include AddRow logic and fixed binding issue

var id_age;
function AddRow() {
    var rowCount = $('#dependent_table tbody tr').length;
        id_age = 'age_dependent_'+ rowCount; 
        $("#dependent_table tbody").append( "<tr id='dep_row_" + rowCount + "'>"+ "<td class='vert-align' style='width:45%;'><input type='text' class='form-control' name='name_dependent["+rowCount+"]' id='name_dependent_" + rowCount + "'></td>"+ "<td class='vert-align' style='width:10%;'><input type='text' class='form-control' name='age_dependent["+rowCount+"]' id='"+id_age+"' disabled></td>"+ "<td class='vert-align' style='width:35%;'><div class='col-md-12'><div class='form-group has-feedback' style='margin-top:12px;'><input class='form-control datePick' id='dob_dependent_"+ rowCount +"' name='dob_dependent["+rowCount+"]' placeholder='YYYY-MM-DD' data-date-format='yyyy-mm-dd' type='text' onchange=\"CalculateAge(this.value,'" + id_age + "');\"/><i class='glyphicon glyphicon-calendar form-control-feedback'></i></div></div></td>"+ "<td class='vert-align' style='width:10%;'><button type='button' class='btn btn-danger btnDelete'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></td>"+ "</tr>");
        $("#dep_row_" + rowCount + " .btnDelete").bind("click", Delete); //bind the callback only to the newly created row's delete button
        rowCount++;        
}

function Delete() {
  var rowToDelete = $(this).parent().parent();
  var currentId = parseInt(rowToDelete.attr('id').split('_').pop());
  var nextRow = $('#dep_row_' + (currentId + 1)); //get the next row
  
  rowToDelete.remove(); //remove the current row
  
  if (nextRow) { //if there's another row
    nextRow.attr('id', 'dep_row_' + currentId); //replace the id with the old one
      // go through each input and rename
      $('input', nextRow).each(function() {
        var input = $(this);
        var inputName = input.attr('name').split('[')[0]; 
        input.attr('name', inputName + '[' + currentId + ']');
      });
    ++currentId;

    //do the same for the subequent rows
    console.dir(nextRow.nextAll());
    nextRow.nextAll().each(function() {
      var row = $(this);
      row.attr('id', 'dep_row_' + currentId);
      $('input', row).each(function() {
        var input = $(this);
        var inputName = input.attr('name').split('[')[0]; 
        input.attr('name', inputName + '[' + currentId + ']');
      });
      ++currentId;
    });
   }

}

$('#add').on('click', AddRow);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add row</button>
<table id="dependent_table">
<tbody>
</tbody>
</table>