javascript - 使用 javascript/jQuery 插入新行时如何向每个表行插入 "remove button"

Question

我更愿意使用 javascript 来完成它，但如果 jQuery 最简单，那么我会改用它。我只是不太了解 jQuery。我目前的 HTML 表格是:

<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);
}

最大的问题是当我尝试创建 "var bt = document.getElementById("btnRemoveItem");"并尝试将其插入到 cell3 中。我真的不知道如何以任何其他方式完成此操作。感谢您的帮助。

Answer 1

当您尝试在不同位置多次向 DOM 添加相同的 exact 元素对象时，浏览器通常不喜欢它。

试试这个，注意您可能需要处理页面上具有相同元素 ID 的多个元素:

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

• MDN: Node.cloneNode