How to insert another table row between two table rows?

问题

<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);

回答1:

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


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

回答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

回答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'));
});

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

来源：https://stackoverflow.com/questions/14232815/how-to-insert-another-table-row-between-two-table-rows

标签

jquery

class

html-table