Question

我正在尝试使用纯javascript删除所选行或所有行。我无法删除选定的行。我fiddle

中的问题是什么

编辑：第一行是标题，所以不考虑这一点。

document.getElementById("delete").addEventListener("click", function() {
  var tableRef = document.getElementById('links-list');
  var tableRows = document.getElementById("links-list").rows;
  var checkedIndexes = [];
  for (var i = 1; i < tableRows.length; i++) {
    var checkboxSelected = tableRows[i] && tableRows[i].cells[0].firstChild.checked;
    if (checkboxSelected) {
      checkedIndexes.push(i);
    }
  }

  for (var k = 0; k < checkedIndexes.length; k++) {
    tableRef.deleteRow(checkedIndexes[k]);
  }
});

Answer 1

这可能类似下面的tableRows[i].querySelector('input').checked，因为.firstChild是一个文本节点。此外，tableRows的索引以0开头。

document.getElementById('delete').addEventListener('click', function() {
    var tableRef = document.getElementById('links-list');
    var tableRows = document.getElementById('links-list').rows;

    var checkedRows = [];
    for (var i = 0; i < tableRows.length; i++) {
        if (tableRows[i].querySelector('input').checked) {
            checkedRows.push(tableRows[i]);
        }
    }

    for (var k = 0; k < checkedRows.length; k++) {
        checkedRows[k].parentNode.removeChild(checkedRows[k]);
    }
});

由于最后一个循环改变了dom，因此当同时删除多行时，基于索引的删除是不可靠的。因此，它应该遍历实际节点而不是纯索引。

Answer 2

您可以使用document.querySelectorAll方法和正确的css选择器来获取所有选中的复选框。然后从表中删除带有选中复选框的行。

let tableRef = document.getElementById('links-list');
let tbody = tableRef.querySelector("tbody");

let checkedInputs = document.querySelectorAll("input[type='checkbox']:checked");
Array.prototype.slice.call(checkedInputs)
   .forEach( input => tbody.removeChild(input.parentNode.parentNode))

也可以使用es7语法编写这样的

[...checkedInputs].forEach( input => tbody.removeChild(input.parentNode.parentNode))

Answer 3

使用children属性而不是firstChild属性。您还可以通过避免元素重新计算来增强代码。例如，您已找到该表，因此从中获取该行。

同样在删除行时，从最后开始然后上升。

document.getElementById("delete").addEventListener("click", function() {
  var tableRef = document.getElementById('links-list');
  var tableRows = tableRef.rows;
  var checkedIndexes = [];
  for (var i = 0; i < tableRows.length; i++) {
    var checkboxSelected = tableRows[i].cells[0].children[0].checked;
    if (checkboxSelected) {
      checkedIndexes.push(i);
    }
  }

  for (var k = checkedIndexes.length - 1; k >= 0; k--) {
    tableRef.deleteRow(checkedIndexes[k]);
  }
});

<table id="links-list">
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test1
    </td>
  </tr>
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test2
    </td>
  </tr>
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test3
    </td>
  </tr>
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test4
    </td>
  </tr>
  <tr>
    <td>
      <input type=checkbox>
    </td>
    <td>
      Test5
    </td>
  </tr>
</table>

<input type=button value="delete" id="delete">

Answer 4

您有2个错误，首先您没有正确获取该值;其次，您要在列表中删除您正在迭代的内容，因此您需要修复它。试试这个：

document.getElementById("delete").addEventListener("click", function() {
  var tableRef = document.getElementById('links-list');
  var tableRows = document.getElementById("links-list").rows;
  var checkedIndexes = [];
  for (var i = 1; i < tableRows.length; i++) {
    var checkboxSelected = tableRows[i] && tableRows[i].cells[0].firstElementChild.checked;
    if (checkboxSelected) {
      checkedIndexes.push(i);
    }
  }

  for (var k = 0; k < checkedIndexes.length; k++) {
    tableRef.deleteRow(checkedIndexes[k]-k);
  }
});

fiddle

纯javascript删除html表中的选定行

4 个答案: