HTML Table Append, JQuery Array

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?

ndm · Accepted Answer · 2012-10-01 22:12:55Z

2

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

answered Oct 1, 2012 at 22:12

ndm

60.6k9 gold badges73 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Charlie Yabben Over a year ago

unfortunately this didn't work. It still did what i described above

ndm Over a year ago

Are we talking about different things? It's working fine for me: jsbin.com/icutuj/8/edit (click the serialize button after adding/removing rows)

jhilden · Accepted Answer · 2012-10-01 21:49:55Z

1

Rather than trying to fix the index what I do is create a hidden variable, let's call it Index, and every time a new row is added you Index++.

Then, when the data is posted back you can have something like this quick pseudo code:

for (int i = 0; i++ i<$index) {
   var person = $POST[person_$index];
   if (person != null) {
     //do something
   }
}

In this way you don't really care how many records they deleted.

Cheers!

answered Oct 1, 2012 at 21:49

jhilden

12.5k5 gold badges56 silver badges77 bronze badges

Comments

hagensoft · Accepted Answer · 2012-10-01 21:58:03Z

Maybe not the best solution, but I got away with this by blanking the row values, then changing the delete() for hide(). and not maintaining a row count. hope theres a better solution.

    $('div#editPhoneDlg').delegate('a.remove[href^=#]', 'click', function () {

        var row = $(this).parent().parent();
        if (rowCount > 1) {
            var name = $(row).find('td.name input');
            name.val('');
            var address = $(row).find('td.address input');
            address.val('');
            var phone = $(row).find('td.phone input');
            phone.val('');
            row.hide();
        }
        else {
            var name = $(row).find('td.name input');
            name.val('');
            var address = $(row).find('td.address input');
            address.val('');
            var phone = $(row).find('td.phone input');
            phone.val('');
        }
        return false;
    });

Collectives™ on Stack Overflow

HTML Table Append, JQuery Array

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related