javascript - how to give continuous number for a Serial No. column within a table using jquery - Stack Overflow

admin管理员组

文章数量:1023895

I have a table. see my 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 press on the delete button i need to hide that row I have used this to remove particular row from the table

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

Its working fine. But the serial number... i's display as wrong. I.e. when I delete second row the serial number with in the third row is still 3 I need to display this s 2 and so on...

I there is any way to do this in jquery Thanks in advance

I have a table. see my 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 press on the delete button i need to hide that row I have used this to remove particular row from the table

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

Its working fine. But the serial number... i's display as wrong. I.e. when I delete second row the serial number with in the third row is still 3 I need to display this s 2 and so on...

I there is any way to do this in jquery Thanks in advance

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 5, 2012 at 11:01 yunzen 33.5k1313 gold badges7878 silver badges113113 bronze badges asked Apr 5, 2012 at 10:15 user1263260user1263260 24333 gold badges66 silver badges1818 bronze badges 1

• Can you explain your problem a way everybody will understand? (I can't see your problem (maybe my bad english?)) – user1150525 Commented Apr 5, 2012 at 10:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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
        }
    });
}

If I understand correctly, you need to update the first cell of each row so they display the rank of the row.

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

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

You need to reorder the Serial no. after deletion . You can use something like this :

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

I have a table. see my 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 press on the delete button i need to hide that row I have used this to remove particular row from the table

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

Its working fine. But the serial number... i's display as wrong. I.e. when I delete second row the serial number with in the third row is still 3 I need to display this s 2 and so on...

I there is any way to do this in jquery Thanks in advance

I have a table. see my 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 press on the delete button i need to hide that row I have used this to remove particular row from the table

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

Its working fine. But the serial number... i's display as wrong. I.e. when I delete second row the serial number with in the third row is still 3 I need to display this s 2 and so on...

I there is any way to do this in jquery Thanks in advance

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 5, 2012 at 11:01 yunzen 33.5k1313 gold badges7878 silver badges113113 bronze badges asked Apr 5, 2012 at 10:15 user1263260user1263260 24333 gold badges66 silver badges1818 bronze badges 1

• Can you explain your problem a way everybody will understand? (I can't see your problem (maybe my bad english?)) – user1150525 Commented Apr 5, 2012 at 10:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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
        }
    });
}

If I understand correctly, you need to update the first cell of each row so they display the rank of the row.

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

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

You need to reorder the Serial no. after deletion . You can use something like this :

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

本文标签： javascripthow to give continuous number for a Serial No column within a table using jqueryStack Overflow