如何在两个表行之间插入另一个表行?

时间:2013-01-09 10:12:50

标签: jquery class html-table

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

这是表格结构。 我想在Row下面插入

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

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

此代码效果很好。

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

3 个答案:

答案 0 :(得分:4)

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


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

答案 1 :(得分:1)

试试这个

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

这会在表格的最后一行附加另一行

FIDDLE此处

答案 2 :(得分: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'));
});
  1. 我们将新行存储在JS变量中。你必须以某种方式构建这个字符串。
  2. 使用jquery insertAfter方法,该方法在所选元素之后插入调用者。
  3. 最重要的是,选择器将获得对标有类dynamicRows的最后一行的引用。