Clever Geek Handbook

How to give a continuous number for a serial number column in a table using jquery

I have a table. see table structure

<table width="100%" border="1">
  <tr>
    <td width="2%"><h2># SL NO</h2></td>
    <td width="70%"><h2>Name</h2></td>
    <td width="15%"><h2>Edit</h2></td>
    <td width="13%"><h2>Delete</h2></td>
  </tr>


  <tr id="id0">
    <td >1</td>
    <td>XXXXXXX</td>
        <td><a href="#"><img src="../images/icon_edit.gif" alt="Edit" /></a></td>
    <td width="13%"><a href="#"><img src="../images/delete_07.png" alt="Delete"  onclick="fnDeleteState(0)" /></a></td>
  </tr>
  <tr id="id1">
    <td>2</td>
     <td>XXXXXXX</td>
    <td><a href="#"><img src="../images/icon_edit.gif" alt="Edit" /></a></td>
    <td%"><a href="#"><img src="../images/delete_07.png" alt="Delete"  onclick="fnDeleteState(1)" /></a></td>
  </tr>

... .... ..     

When the delete button is clicked, I need to hide this row, which I used to delete a specific row from the table

$("#id" + i).remove();

Works great. But the serial number ... I'm showing as wrong. That is, when I remove the second line, the serial number on the third line is still 3

I need to display this s 2 and so on ...

I have a way to do this in jquery Thanks in advance

+3


source to share


3 answers 


function fnDeleteState(i) {
    $("#id" + i).remove();
    $("tr").each(function (index) { // traverse through all the rows
        if(index != 0) { // if the row is not the heading one
            $(this).find("td:first").html(index + ""); // set the index number in the first 'td' of the row
        }
    });
}


+3


source


If I understand correctly, you need to update the first cell of each row so that they reflect the row's rank.

You can achieve this by adding a class for each of your content lines, like "contentrow" (to distinguish them from the title line), and then write a function like this:



function refreshRowIDs(){
    $(".contentrow").each(function(index){
        $(this).children("td:first").html(index);
    });
}
+1


source


You need to change the order of the serial number. after deletion. You can use something like this:

 function reorder(){
   var i = 1;
   $('#tableid tr').each(function() {
        $(this).find("td:first").text(i);
        i++;
    });
  }
0


source






More articles:


All Articles