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 添加相同的精确元素对象时，浏览器通常不喜欢它。

尝试这样做，并注意您可能必须处理页面上具有相同元素 ID 的多个元素:

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

• MDN: Node.cloneNode