How to insert a table after the row of another table using jquery

Question

Hello All,

I need to dynamically append table to a row of another table .

for eg .

I first create a div Then I insert a table after this

  $('<table id="container"> <tr> <td> </td> <td> <input type="checkbox" /> </td> <td> </td> </tr>  </table>')
   $('<<tr> <td> </td> <td> <input type="checkbox" /> </td> <td> </td> </tr> >').appendTo('#container');

Now I would like to add another table with rows based on the selection of the checkbox (i.e i need to add table after the row of the selected checkbox )

Can anyone guide me this in jquery ?

Mithun

Answer 1

You would select your row based on the checkbox selected:

$(":checked").parents("tr")

This assumes you only have one checked - you may be better to consider radio buttons if only one will be checked. You could narrow your selection down more

$("#Container :checked").parents("tr")

(This would assume you've already added #container to your DOM)

To append a row after this row, you use the after() or insertAfter() function:

$(":checked").parents("tr").after("<tr><td></td></tr>">
$("<tr><td></td></tr>").insertAfter($(":checked").parents("tr"));

Not tested, but should work.

I think this is want you want, but if not can you edit your original post to clarify?

If you are creating a similar row, you could consider using the .clone() function. This post has some example code that does the same sort of thing:

http://stackoverflow.com/questions/1286829/is-there-a-preferred-way-of-formatting-jquery-chains-to-make-them-more-readable