在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表格的末尾添加單擊的行+下一行

回答

相關問題