Add rows to a table inside a repeater in client side with jquery

Question

I have a repeater which contains a table. I am giving the user the ability to add a new row in the repeater by adding a new row to the table.

Can anyone give me ideas? As I am very new to jQuery, can someone give sample code?

Answer 1

If you look at the jQuery manipulation methods these are the methods for modifying the DOM in jQuery.

I would suggest for what you are doing something along the lines of:

var tableToUpdate = $('#yourTableId'); // select the table
var rowToAdd = $('<tr></tr>'); // this will create a table row element
rowToAdd.append('<td>some content for this cell</td>'); // add the columns to your new row
tableToUpdate.append(rowToAdd); // append the row to the end of the table

This will insert a new row at the end of the table. If your table has a tbody (you will have to modify your initial selector to '#yourTableId tbody'.

To insert the new row in different positions within the table look though the other manipulation methods - after, before, prepend etc.

Hope this helps, if you are able to be a little more specific about the situation, I can probably give you a more concrete example.