Question

I’m working on making a dynamic HTML table using jQuery. In a table, my user has two interactions:

1. Append a row
2. Remove a specific row

The problem with numbering the rows is that if a user removes a specific row, all of the rows following that row need to be renumbered. I would have to select all rows following the removed row and subtract their number by 1.

Is there a better way to go about this?

EDIT: Here’s a JSFiddle demonstrating the problem: http://jsfiddle.net/LNXae/2/

I’m aware that an ordered-list would automatically renumber my rows, but I’d rather use a table since the example I’m giving now is pretty boiled-down.

Answer 1

http://jsfiddle.net/mblase75/LNXae/1/

First, wrap the counter number in a <span> with a class for easy finding later:

$new_row.children('td').prepend('Row #<span class="num">' + ($new_row.index() + 1) + "</span>");

Then update all these spans with an .each loop after you remove the desired row. The first argument passed into .each‘s callback function is a zero-based index number, and the second is the HTML element:

    var $row = $(this).closest('tr'),
        $table = $row.closest('table');
    $row.remove();

    $table.find('tr').each(function(i, v) {
        $(v).find('span.num').text(i + 1);
    });