在HTML表格的末尾添加单击的行+下一行

我试图将点击的行+下一行添加到HTML表格的末尾。由于某些原因，当我使用originalRow.next()代码时，它将该行添加为HTML表格的首行。我希望它被添加到表格的底部而不是顶部。在HTML表格的末尾添加单击的行+下一行

var rowId = $("#menuToolsetTemplate").attr("rowId"); 
    var originalRow = $("#" + rowId); 
    var rowToBeAdded = $("#" + rowId).clone(); 


    // when adding module level 
    if ($(rowToBeAdded).attr("class") == "PARENTROWCONTENTS") { 

    $("#tblTemplate_Body").append(rowToBeAdded); 
    $("#tblTemplate_Body").append($(originalRow).next()); 

}

originalRow是用户点击的行。我对该行进行克隆并添加到表格的底部。我还需要将oringinalRow.next添加到表格的底部。

来源

2012-02-07 azamsharp

也许如果你$ originalRow.appendTo（$（“＃tblTemplate_Body”））它会工作。我也可以建议你尝试添加一个美元符号到你的代表jQuery对象的变量名吗？这样你可以很容易地记住，当你稍后再次使用它时，你不需要将它包装在jquery选择器中。 ;） – Malk 2012-02-07 22:49:45

你可以创建一个JSFiddle，这样我们就可以看到自己的行为了吗？ – Jasper 2012-02-07 22:53:31

@Adam我想添加单击行和下一行的克隆，然后添加到表的底部。 – azamsharp 2012-02-07 23:00:28

我认为你正在寻找tr:last和.after功能。检查我的演示here

HTML：

<table id="mytable" cellpadding="0" border="1px" > 
    <tr> 
     <td>Row 1</td> 
     <td>Row 1</td> 
     <td>Row 1</td> 
    </tr> 
    <tr> 
     <td>Row 2</td> 
     <td>Row 2</td> 
     <td>Row 2</td> 
    </tr> 
    <tr> 
     <td>Row 3</td> 
     <td>Row 3</td> 
     <td>Row 3</td> 
    </tr> 
</table>

JS：

$('#mytable tr').on ('click', function() { 

    var $this_cloned = $(this).clone(); 
    var $nextRow = $(this).next(); //Not sure if you wanted to clone the next row or move 

    $('#mytable tr:last').after($this_cloned); 
    $('#mytable tr:last').after($nextRow); 
});

来源

2012-02-07 23:02:53

答案是：克隆原始行和下一行然后使用append方法添加到表中。

来源

2012-02-07 23:02:59 azamsharp

在HTML表格的末尾添加单击的行+下一行

回答

相关问题