Question

I have a table like below and its rows can be added and removed by using the add/remove buttons.

<table class="dynatable">
    <thead>
        <tr>
            <th><button class="add">Add</button></th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="prototype">
            <td><input type="text" name="id[]" value="0" class="id" /></td>
            <td><input type="text" name="name[]" value="" /></td>
            <td><input type="text" name="col4[]" value="" /></td>
            <td><input type="text" name="col3[]" value="" /></td>
        </tr>
    </tbody>
</table>

The first column in the table contains the serial number. But when the rows are removed in between it is losing its sequence.

For example if there are rows 5 rows with serial sequence of 1,2,3,4,5

If the row with the serial number of 3 is removed the serial number will lose the sequence to 1,2,4,5

But I want the serial numbers in the first column to keep the sequence like 1,2,3,4 after removing a row from a five rows

And if I add 5 rows and removed all the rows and start to add rows again. the sequence starts from 6 instead of 1.

How can I do it using jQuery?

Answer 1

I would recalculate the whole sequence when something is removed like this:

http://jsfiddle.net/5HCVX/16/

function recalcId(){
    $.each($("table tr.item"),function (i,el){
        $(this).find("td:first input").val(i + 1); // Simply couse the first "prototype" is not counted in the list
    })
}

​Also when something is removed just to decresse the id