Question

我有这个html表的结构：

    <table id="test">
     <thead>
       <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
       </tr>
     </thead>
     <tbody>
       <tr>
        <td><a href="javascript:{}" onclick="addPiece(1)">add</a></td>
       </tr>
       <tr>
        <td></td>
       </tr>
       <tr>
        <td></td>
       </tr>
       <tr>
        <td></td>
       </tr>
      </tbody>
     </table>

我需要在用户定义的表体位置克隆行。用户可以通过单击某个链接来定义克隆此块的位置。例如，<a href="javascript:{}" onclick="addPiece(1)">add</a>必须在表中的第一个块之后克隆块。我怎么能这样做？

Answer 1

这个答案会有所帮助。 Add table row in jQuery

实际上在指定的答案中，它是在表的末尾添加行。但是如果从用户事件中获取行，则不需要该选择器。

Answer 2

您需要该字段的ID，之后应插入该行。然后你做：

$('#tr-id').after('<tr><td>New line</td></tr>');

Answer 3

您可以在指定行之前或之前添加新行在指定索引之前添加行

$("<tr><td>0</td></tr>").insertBefore( $('#test > tbody > tr').get(0) );

在指定的索引

之后添加行

$("<tr><td>0</td></tr>").insertAfter( $('#test > tbody > tr').get(0) );

同样你也可以使用.before（）和.after（）方法。

Answer 4

这是一个非常简单的函数，它将创建一个<tr>，在其中放置一个<td>，在td中放一个5。然后它会将它添加到#test表中tbody的末尾。

function(){
    var tr = $('<tr/>');
    var td = $('<td/>');
    td.text('5');
    tr.append(td);
    $('#test tbody').append(tr);
}

如果您在JochenJung建议的地方使用HTML字符串，则可以跳过var tr和var td，但这样做可以让您例如向tr添加类，或者colspan到td。

您也可以执行类似

的操作

$('#table tbody').append($('#table tr:last-child').clone())

但请注意，这需要对#table进行两次查找，并且不会为要修改的元素提供句柄。

（我在这里保存了这个例子，所以你可以玩它：http://jsbin.com/aduko/edit）

Answer 5

例如，你想在第2个地方之前添加你提到的块，那么可能这对你来说很好

function addPiece(position) {
    $("#YOURBLOCK").clone().insertBefore( $('#test > tbody > tr').get(position) );
}

同样适用于插入后

function addPiece(position) {
    $("#YOURBLOCK").clone().insertAfter( $('#test > tbody > tr').get(position) );
}

将当前行添加到表中

5 个答案: