how to recalculate serial number in a html table after removing row by jquery

Question

I have following table layout:

<table border="1" id="staff">
  <tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th></tr>
  <tr id="1"><td>1</td><td>Futter</td><td>Anders</td<td>Germany</td></tr>
  <tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td<td>Sweden</td></tr>
  <tr id="5"><td>3</td><td>Centro</td><td>Francisco</td<td>Mexico</td></tr>
  <tr id="8"><td>4</td><td>Handel</td><td>Roland</td<td>Austria</td></tr>     
</table>

Now, after pressing delete button, a jquery function post the tr id to the processing php page, and after successful php & mysqli deleting operation, the processing php page send callback message to table page. The jquery function then remove the consequent row from the html table:

$("body").on("click",".del",function(event){
   event.preventDefault();
   var table= 'staff';
   var id = $(this).closest('tr').attr('id'); 
       $.post(url,
        {
         table: tbl,
         trid: id,
        },function(data){
          var callback_msg = data.return_msg;
          if(callback_msg=='delete'){
            $('#'+id).remove();
          }
       });
});

so, if an user wish to delete 3rd row with tr id 5, after deletion of that row, S/N column is remained unchanged like this:

<table border="1" id="staff">
  <tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th></tr>
  <tr id="1"><td>1</td><td>Futter</td><td>Anders</td<td>Germany</td></tr>
  <tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td<td>Sweden</td></tr>
  <tr id="8"><td>4</td><td>Handel</td><td>Roland</td<td>Austria</td></tr>     
</table>

You can see serial number column is now 1,2,4 (as serial number 3 is removed).

How can I include a function in my jquery code, so that after deletion it will re-order the serial number to 1,2,3 (i.e serial number of last row will become 3)?

[note: deletion may be in the middle row. so the .last() selector may not work in this case]

Answer 1

After deleting the row, just loop through its siblings updating their first cell:

var callback_msg = data.return_msg;
if(callback_msg=='delete'){
    var row = $(document.getElementById(id)); // Or continue to use the invalid ID selector: '#'+id
    var siblings = row.siblings();
    row.remove();
    siblings.each(function(index) {
        $(this).children('td').first().text(index + 1);
    });
}

Live Example (I had to add a .del element to each row, I assume you're doing that somewhere...):

$("body").on("click",".del",function(event){
   event.preventDefault();
   var table= 'staff';
   var row = $(this).closest('tr');
   var id = row.attr("id");
   alert("Deleting id #" + id);
   setTimeout(function() { // Simulating ajax
       var siblings = row.siblings();
       row.remove();
       siblings.each(function(index) {
         $(this).children().first().text(index);
       });
   }, 100);
});

.del {
  cursor: pointer;
}

<table border="1" id="staff">
  <tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th><th></th></tr>
  <tr id="1"><td>1</td><td>Futter</td><td>Anders</td><td>Germany</td><td class="del">X</td></tr>
  <tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td><td>Sweden</td><td class="del">X</td></tr>
  <tr id="8"><td>3</td><td>Handel</td><td>Roland</td><td>Austria</td><td class="del">X</td></tr>
  <tr id="9"><td>4</td><td>JLR</td><td>Jag</td><td>UK</td><td class="del">X</td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

From the comments, you seem unsure where to put the above. Here it is in context:

$("body").on("click",".del",function(event){
   event.preventDefault();
   var table= 'staff';
   var id = $(this).closest('tr').attr('id'); 
       $.post(url,
        {
         table: tbl,
         trid: id,
        },function(data){
          var callback_msg = data.return_msg;                   //
          if(callback_msg=='delete'){                           //
            var row = $(document.getElementById(id));           // Changed
            var siblings = row.siblings();                      // code
            row.remove();                                       // is
            siblings.each(function(index) {                     // here
                $(this).children('td').first().text(index + 1); //
            });                                                 //
          }                                                     //
       });
});

Although actually, this would be more efficient and avoid selecting by id at all:

$("body").on("click",".del",function(event){
   event.preventDefault();
   var table= 'staff';
   var row = $(this).closest('tr');                            // *
   var id = row.attr('id');                                    // *
       $.post(url,
        {
         table: tbl,
         trid: id,
        },function(data){
          var callback_msg = data.return_msg;                   // *
          if(callback_msg=='delete'){                           // *
            var siblings = row.siblings();                      // *
            row.remove();                                       // *
            siblings.each(function(index) {                     // *
                $(this).children('td').first().text(index + 1); // *
            });                                                 // *
          }                                                     // *
       });
});

---

Note about using '#'+id when id is a number: ID selectors starting with digits (like #1, #42, etc.) are invalid. jQuery supports them in isolation (e.g., $("#1") works but $("#1 span") does not) as a by-product of the fact that it optimizes them, using getElementById under the covers. That is undocumented behavior which, in theory, could change at any time. (In fact, if they changed it, I can't imagine how many sites they'd break. :-) ) I avoid relying on undocumented behavior, so I'd suggest $(document.getElementById(id)) instead, which relies solely on documented behavior.