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'属性是唯一的。

希望这有帮助。

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

1 个答案: