How to insert another table row between two table

Question

<table>
 <tr>
  <td>Row 1 Column1</td>
  <td>Row 1 Column2</td>
 </tr>
 <tr class="dynamicRows">
  <td>Row 2 Column1</td>
  <td>Row 2 Column2</td>
 </tr>
 <tr class="dynamicRows">
  <td>Row 3 Column1</td>
  <td>Row 3 Column2</td>
 </tr>
 <tr>
  <td>Row 5 Column1</td>
  <td>Row 5 Column2</td>
 </tr>
</table>

This is the Table Structure. I want to insert below Row

<tr class="dynamicRows">
 <td>Row 4 Column1</td>
 <td>Row 4 Column2</td>
</tr>

After the 3rd row I want to insert new row elements via Jquery at the end of "dynamicRows" class. Please help me sort out this issue.

This code works well.

$('table tr.categories:last').after(returnData);

Answer 1

var block = '<tr class="dynamicRows">'+
                '<td>Row 4 Column1</td>'+
                '<td>Row 4 Column2</td>'+
            '</tr>';


$('.dynamicRows').last().after(block);

Answer 2

Try This

$('table tbody>tr:last').after('<tr><td>Row 6 Column1</td><td>Row 6 Column2</td></tr>');

this will append another row in last of table

FIDDLE here

Answer 3

Here's a working example http://jsfiddle.net/MUdQY/1/

I am posting part of the solution here as well to better explain what's happening here:

$('#sometrigger').click(function(){
    var newrow = '<tr class="dynamicRows">\
    <td>Row 4 Column1</td>\
    <td>Row 4 Column2</td>\
    </tr>';
    $(newrow).insertAfter($('table tr.dynamicRows:last'));
});

1. We are storing the new row in a JS variable. You will have to build this string somehow.
2. Using the jquery insertAfter method, which inserts the caller after the selected element.
3. And the most important of all, the selector that will get the reference to the last row marked with the class dynamicRows.