adding multiple table rows
Hi,
I'm pretty new to jQuery, but am starting to get the hang of it.
However, I've been struggling for the last couple of days with the following problem. I'm trying to write an app that will allow the user to add several new rows with input boxes to the end of a table in order to allow the user to input additional values if they need to.
I've had no problem when I just need to clone one row, as I can use the clone() function and change the id's of the input boxes, so I will have a collection of form elements named val0, val1, val2, etc...
What I am now trying to do is to clone the last four rows of a table and add four more rows. I tried various things, and almost thought I had it with the following:
(The table in question has an id named 'pb')
- var lastRow = $('#pb tr').length;
- var counter = (lastRow / 4) - 1;
- $("#pb tr:nth-child(lastRow - 4), #pb tr:nth-child(lastRow - 3), #pb tr:nth-child(lastRow - 2), #pb tr:last").clone(true).insertAfter("#pb tr:last").find("#existingPost" + counter).attr('id', 'existingPost'+(counter + 1)).val('0').end().find("#lumpSum" + counter).attr('id', 'lumSum'+(counter + 1)).val('0').end().find("#date" + (counter)).attr('id', 'date'+(counter + 1)).val('0').end();
This works the first time (I end up with eight columns). However, the next time I run this it clones the whole table, so I have 8 columns, then 16 columns, etc.
I'm just wondering if there is a better way than use 'nth-child' or whether it is appropriate at all for this purpose.
Any suggestions would be appreciated.
Many Thanks
Neil.