代码之家 › 专栏 › 技术社区 › Kurkula

纯javascript删除html表中的选定行[重复]

html javascript

Kurkula · 技术社区 · 8 年前

我正在尝试使用纯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]);
  }
});

4 回复 | 直到 8 年前

dferenc ari 8 年前

这应该像下面的一样 tableRows[i].querySelector('input').checked 像 .firstChild 是一个textnode。此外,索引 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,当同时删除多行时,基于索引的删除是不可靠的。因此,它应该遍历实际节点,而不是纯索引。

eltonkamami 8 年前

您可以使用 document.querySelectorAll 方法,以获取所有选中的复选框。然后,可以从表中删除选中复选框的行。

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

Racil Hilan 8 年前

使用 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">

agustin37 8 年前

您有两个错误,第一个错误是没有正确获取值;其次,您正在迭代的列表中删除,因此需要修复该问题。尝试以下操作:

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