Question

我正在尝试将单击的行+下一行添加到HTML表的末尾。出于某种原因，当我使用originalRow.next()代码时，它会将行添加为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添加到表格的底部。

Answer 1

我认为您正在寻找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);
});

Answer 2

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

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

2 个答案: