如何在使用javascript/jQuery插入新行時向每個表格行插入「刪除按鈕」

我寧願使用javascript來完成此操作，但如果jQuery最簡單，那麼我將使用它。我只是不太瞭解jQuery。我目前有我的HTML表：如何在使用javascript/jQuery插入新行時向每個表格行插入「刪除按鈕」

<table id = "liftTable" border="1" rules="rows"> 
<caption><b>Today's Workout</b></caption> 
<tr> 
<th align="left" width="150">Lift Name</th> 
<th align="left" width="90">Weight (lbs)</th> 
</tr> 
<tr> 
    <td>Bench Press</td> 
    <td>2000</td> 
    <td><input name="btnRemoveItem" type="button" id="btnRemoveItem" value="Remove Lift" onclick="removeListItem(this)"/></td> 
</tr> 
<tr> 
<th align="left">Total:</th> 
<td class="sum">0</td> 
</tr> 
</table>

這表有一個樣品已經在那裏顯示我多麼希望每一個新的行設置。這裏是我的「添加行」的javascript：

function addTableRow(){ 
var iteration = 1; 
var table = document.getElementById("liftTable"); 
var rowCount = table.rows.length - 2; 
var row = table.insertRow(rowCount); 
var cell1 = row.insertCell(0); 
var cell2 = row.insertCell(1); 
var cell3 = row.insertCell(2); 
cell1.innerHTML = document.getElementById("Form1").value; 
cell2.innerHTML = document.getElementById("numOfSets").value; 
var bt = document.getElementById("btnRemoveItem"); 
cell3.appendChild(bt); 
}

最大的問題是，當我嘗試創建「無功BT =的document.getElementById（」 btnRemoveItem 「）;」並嘗試將其插入cell3。我真的不知道如何以其他方式完成此任務。謝謝你的幫助。

來源

2014-01-13 Black

我忘了包含Form1和numOfSets代碼，但這些並不是絕對必要的。我只是想知道如何將按鈕添加到每一行。 – Black

ID的意思是排他性的，所以創建一個具有重複ID屬性的新的'removeButton'可能會給你一個問題。我會改爲'btnRemoveItem'爲一個類，然後查詢該行的所有類 –

瀏覽器通常不喜歡它，當您嘗試在不同的地方不止一次地將相同的元素對象添加到DOM時。

試試這個，請注意您可能必須處理具有相同元素的ID在頁面上的多個元素：

var bt = document.getElementById("btnRemoveItem").cloneNode();

MDN: Node.cloneNode

來源

2014-01-13 21:51:59

這個工作。該按鈕被克隆到每一行，每一行都是完美的。謝謝！ – Black

Upvotes and accepted是該平臺的貨幣。謝謝，麻煩您了！ –

太低級別upvote，我試過。然後接受告訴我等5分鐘。當我刪除原始行時發現問題，添加行功能找不到要克隆的原始刪除按鈕。我想我可以在添加行函數中創建按鈕元素，但我不知道如何做到這一點。有任何想法嗎？ – Black

你總是可以創建一個新的元素與document.createElement("input")。 cloneNode()已經在做這個了，但它可以讓您靈活地手動設置ID並實例化輸入元素，而不用考慮當前DOM中是否存在任何實例。這是香草JS。如果內存服務的話，jQuery只需要包裝一個$()，並且只允許你使用jQuery來改變它並插入它而不是vanilla JS。

來源

2014-01-13 22:33:36 citizenslave

我試過 var bt = document.createElement（「button」）; bt.id = btn1; bt.value =刪除項目; 我不知道如何將按鈕鏈接到removeListItem（）javascript函數 – Black

您有兩種選擇。您可以將'bt.onclick'設置爲'removeListItem（this）'，或者您可以使用'bt.addEventListener（'click'，removeListItem）''。如果您使用第二個選項，請注意JavaScript將通過EVENT而不是元素傳遞，因此您需要引用參數的'.target'屬性。 – citizenslave

如何在使用javascript/jQuery插入新行時向每個表格行插入「刪除按鈕」

回答

相關問題