javascript - 无法在td的每一行中显示复选框和按钮

Question

我无法在 td 的每一行中显示复选框和按钮。目前它仅附加在最后一行 td 中。以及如何在 td 中的所有行中附加复选框和按钮。任何人都可以帮助我做到这一点吗？

for (var i = 0; i < obj.length; i++) {
  var row = document.createElement("tr");
  table.appendChild(row);
  var cell = document.createElement("td");
  row.appendChild(cell);
  cell.appendChild(checkbox);
  var cell = document.createElement("td");
  row.appendChild(cell);
  cell.innerHTML = i;
  for (key in obj[i]) {
    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.innerHTML = obj[i][key];
  }
  var cell = document.createElement("td");
  row.appendChild(cell);
  cell.appendChild(btnEdit);
  cell.appendChild(btnSave);
}

JsFiddle

Answer 1

基本上发生的情况是，每次将输入/按钮附加到单元格时，您都会移动它们，因为它是相同的元素。

要解决此问题，您必须在 for 循环中创建复选框和按钮。

for (var i = 0; i < obj.length; i++) {
    var btnSave = document.createElement('button');
    btnSave.setAttribute ("id","saveBtn");
    btnSave.innerHTML = "Save";

    var btnEdit = document.createElement('input');
    btnEdit.type = "button";
    btnEdit.value = "Edit";

    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.id= "checkBox";

    var row = document.createElement("tr");
    table.appendChild(row);

    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.appendChild(checkbox);

    var cell = document.createElement("td");
    row.appendChild(cell);

    cell.innerHTML = i;

    for (key in obj[i]) {
        var cell = document.createElement("td");
        row.appendChild(cell);
        cell.innerHTML = obj[i][key];
    }

    var cell = document.createElement("td");

    row.appendChild(cell);
    cell.appendChild(btnEdit);
    cell.appendChild(btnSave);
}

顺便说一句，“id”属性最好是唯一的。

希望这有帮助。