How do I insert a new TR into the MIDDLE of a HTML table using JQuery?

Question

I know how to append a new row to a table using JQuery:

var newRow = $("<tr>..."</tr>");
$("#mytable tbody").append(newRow);

The question is how do I create a new row that precedes some existing row.

Answer 1

Rather than this:

$("#mytable tbody").append(newRow);

you are going to want to do something like this:

$("#id_of_existing_row").after(newRow);

Answer 2

var newRow = $("<tr>...</tr>");
$("#idOfRowToInsertAfter").after(newRow);

The key is knowing the id of the row you want to insert the new row after, or at least coming up with some selector syntax that will get you that row.

jQuery docs on after()

Answer 3

where_you_want_it.before(newRow)

or

newRow.insertBefore(where_you_want_it)

-- MarkusQ

Answer 4

With:

var newTr = $('<tr>[...]</tr>');

You can…

1. Insert it after (or before if you so choose) another row for which you know an ID (or whatever other property):

   $('#<id of the tr you want to insert the new row after>').after(newTr)
   

2. Insert it after a particular row index (indices are 0-based, not 1-based):

   $($('table#<id> tr')[<index>]).after(newTr)
   

3. …or as you mentioned, the absolute middle is possible:

   var existingTrs = $('table#<id> tr')
   

   $(existingTrs[parseInt(existingTrs.length / 2)]).after(newTr)