Question

I have a dynamic table on my page that a user can add rows/delete rows from. So let’s say the user adds 6 people. The first name array would look like this:

Index:    0   1   2   3   4   5
Person#:  1   2   3   4   5   6

Then let’s say the user deletes the first three rows, so the first name array would then look like this:

Index:    0   1   2   3   4   5
Person#:              4   5   6

Finally, the user adds three more people, the array would then be this:

Index:    0   1   2   3   4   5
Person#:              7   8   9

And this is the problem I am having. When deleting a row, how do I shift the jquery array appropriately so that instead of looking like this:

Index:    0   1   2   3   4   5
Person#:              4   5   6

It’ll look like this:

Index:    0   1   2   3   4   5
Person#:  4   5   6   

Here’s a working example of my code: demo
What do I need to add/change in my code to fix the problem?

Answer 1

I normally simply renumber the attribute values. Something like this:

$("#table").find('tr').each(function(index, element)
{
    var row = $(this);

    index --;

    var names = ['fname_new', 'lname_new', 'phone_new', 'email_new', 'ethnicity_new'];
    for(var i in names)
    {
        row.find('input[name^="' + names[i] + '"]').attr('name', '' + names[i] + '[' + index + ']');
    }
});

http://jsbin.com/icutuj/3/edit