Jquery syntax for adding rows between rows of an HTML table

Question

What is jQuery syntax for adding rows between existing rows of an HTML table?

<Table id="TEST"> <tr>1</tr> <tr>2</tr> </table> 

I want to add

 <tr>xx</tr> 

between 1 and 2

eg:

 <tr>1</tr> **<tr>xx</tr>** <tr>2</tr> 

and note that there is no identifier for strings.

Correction of the final appearance

front

 <table id=Test><tr> <td>1 </td> </tr><tr> <td>2 </td> </tr></table> 

after

  <table id=Test><tr> <td>1 </td> </tr> <tr> <td>xx </td> </tr> <tr> <td>2 </td></tr></table> 

Answer 1

Something like that:

 $('#TEST > tbody > tr').eq(0).after('<tr>xx</tr>'); 

Answer 2

 $('#TEST tr:gt(0)').after('<tr>xx</tr>'); 

gt means more. Note that the row index starts at 0, not 1.

Answer 3

especially for consistency between the browser you should wrap your entire tr inside the tbody element. then you can after()/insertAfter() new line (after the first) or before()/insertBefore() line (to the last).

http://api.jquery.com/after/
http://api.jquery.com/before/
http://api.jquery.com/insertAfter/
http://api.jquery.com/insertBefore/

example
insertAfter: $('<tr>xx</tr>').insertAfter($('tr:first'));
after: $('tr:first').after('<tr>xx</tr>');

Answer 4

Assuming that you are looking for a way to insert a new line after the first existing line (and you are not looking for a way to insert it in the place described by the contents of existing lines), you can use after to insert the content, and eq to reduce the set of matched elements to one with index required:

 $("#TEST tr").eq(0).after("<tr><td>x</td></tr>"); 

Note that I added td to the element, since it is not valid to have text nodes as children of tr .

It is also worth noting a wide variety of ways to select the "first" element using jQuery. In 5 answers to this question we see 3 different methods, and even more of them. Using .eq(0) is the most efficient .

Answer 5

 $('#test tr').first().append('<tr>xx</tr>'); 

You can replace first() with eq(n) (in which n is a number from 0 to n-1 rows in the table) and add a row after any existing row.

Answer 6

The answer to your question (literally):

 $("table#test tr:contains('1'").after('<tr>xx</tr>'); 

This means: add "xx" after <tr> , which contains "1" in the table with the identifier "test".

I suppose that is not exactly what you need, can you tell us what exactly you want to do?

There are various ways to add content to elements. I suggest taking a look at the jQuery document, especially the DOM Insertion, Around , DOM Insertion, Inside, and DOM Insertion, Outside .