如何在两个表格行之间插入另一个表格行？答案

【问题标题】：How to insert another table row between two table rows?如何在两个表格行之间插入另一个表格行？
【发布时间】：2013-01-09 10:12:50
【问题描述】：

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

这是表结构。我想在行下方插入

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

在第三行之后，我想通过 Jquery 在 "dynamicRows" 类的末尾插入新的行元素。请帮我解决这个问题。

这段代码运行良好。

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

【问题讨论】：

标签： jquery class html-table

【解决方案1】：

这是一个工作示例http://jsfiddle.net/MUdQY/1/

我也在此处发布部分解决方案，以更好地解释此处发生的情况：

$('#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'));
});

我们将新行存储在 JS 变量中。您将不得不以某种方式构建此字符串。
使用 jquery insertAfter 方法，将调用者插入到选定元素之后。
最重要的是，选择器将获取对标有类 dynamicRows 的最后一行的引用。

【讨论】：

【解决方案2】：

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


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

【讨论】：

【解决方案3】：

试试这个

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

这将在表的最后追加另一行

FIDDLE这里

【讨论】：