Jquery insert new row into table at a certain index

Question

I know how to append or prepend a new row into a table using jquery:

$('#my_table > tbody:last').append(html);

How to I insert the row (given in the html variable) into a specific "row index" i. So if i=3, for instance, the row will be inserted as the 4th row in the table.

Answer 1

$($('#my_table > tbody:last')[index]).append(html);

Answer 2

Try this:

var i = 3;

$('#my_table > tbody > tr:eq(' + i + ')').after(html);

or this:

var i = 3;

$('#my_table > tbody > tr').eq( i ).after(html);

or this:

var i = 4;

$('#my_table > tbody > tr:nth-child(' + i + ')').after(html);

All of these will place the row in the same position. nth-child uses a 1 based index.

Answer 3

You can use .eq() and .after() like this:

$('#my_table > tbody > tr').eq(i-1).after(html);

The indexes are 0 based, so to be the 4th row, you need i-1, since .eq(3) would be the 4th row, you need to go back to the 3rd row (2) and insert .after() that.

Answer 4

Use the eq selector to selct the nth row (0-based) and add your row after it using after, so:

$('#my_table > tbody:last tr:eq(2)').after(html);

where html is a tr

Answer 5

$('#my_table tbody tr:nth-child(' + i + ')').after(html);