Javascript - 按 id 删除一行

Question

我目前正在尝试删除 html 表中的行 每行有三个值。第三个值是一个复选框，用于检查应删除的行。单击删除行按钮后，应删除所有选中的行。问题是当我单击按钮并且没有删除任何行时我什么都不做的代码。

var counter = 0;

function addRow() {
  var table = document.getElementById("table");
  table.setAttribute("border", "1");
  var row = table.insertRow(counter);
  row.setAttribute("id", "row" + counter);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = document.getElementById("name").value;
  cell2.innerHTML = document.getElementById("url").value;

  var checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("name", "shouldDelete");
  checkbox.setAttribute("id", counter);
  cell3.appendChild(checkbox);

  counter = counter + 1;

}

function deleteRows() {
  var checkedItems = document.getElementsByName("shouldDelete");
  var table = document.getElementById("table");
  for (var i = 0; i < checkedItems.length; i++) {
    if (checkedItems[i].checked) {
      var row = document.getElementById("row" + i);
      table.removeChild(row);
    }
  }
}

table {
  width: 50%;
}

 <h1>Tell me your URL:</h1>
<p>Add a new row</p>
<p>
  <label>Your name:</label>
  <input type="text" id="name">
</p>
<p>
  <label>Your URL:</label>
  <input type="text" id="url">
</p>
<p>
  <button onclick="addRow()">Add to bottom</button>
  <button onclick="deleteRows()">Delete selected row(s)</button>
</p>
<hr>
<table id="table"></table>

我就是这样解决的：

function deleteRows() {
            var checkedItems = document.getElementsByName("shouldDelete");
            var ids = [];
            for(var i=0;i<checkedItems.length;i++) {
                if(checkedItems[i].checked) {
                    ids.push("row"+checkedItems[i].id)
                }
            }

            for(var i=0;i<ids.length;i++) {
                var row = document.getElementById(ids[i]);
                var parent = row.parentNode;
                parent.removeChild(row);
                counter = counter-1;
            }
        }

Answer 1

抓住它

由于您有一行的 id，您可以简单地选择它，然后选择它的父项并进行删除。

您的代码不起作用，因为在表格中有一个 tbody 标签或类似的东西，所以table var 不直接包含row。

     function deleteRows() {

        var checkedItems = document.getElementsByName("shouldDelete");
        for(var i=0;i<checkedItems.length;i++) {
            if(checkedItems[i].checked) {
                var row = document.getElementById("row"+i);

                var parent = row.parentNode

                parent.removeChild(row)
            }
        }
    }

更新

好的，我修好了。您需要在循环遍历每个并删除之前存储行名，因为一旦删除了一个项目，您也删除了一个复选框，它开始将您指向错误的元素。

function deleteRows() {

        var deletionRowIds = []

        var checkedItems = document.querySelectorAll('[name="shouldDelete"]:checked');

        console.log(checkedItems)

        for (var i = 0; i < checkedItems.length; i++){
            deletionRowIds.push('row' + checkedItems[i].id);
        }


        deletionRowIds.forEach(function(rowId){ 


            var row = document.getElementById(rowId)
          var rowParent = row.parentNode

          rowParent.removeChild(row)
        });

    }

Answer 2

您使用table.removeChild(row); 删除的元素实际上不是该表的子元素，表的子元素是tbody 标记。 所以使用：

table.firstElementChild.removeChild(row);

代替：

table.removeChild(row); 

Answer 3

为此，请尝试以下代码：

function deletetableRow(tableID)  {
    var table = document.getElementById(tableID).tBodies[0];
    var rowCount = table.rows.length; // it's return total number of rows

    for(var i=1; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[8].getElementsByTagName('input')[0];
        if(null != chkbox && true == chkbox.checked) {
            table.deleteRow(i);
            rowCount--;
            i--;
         }
    }

}

并在删除按钮单击时调用此函数，如下所示：

这里，“datatable”是一个表ID。

Answer 4

试试这个：

function deleteRows() {
  var checkedItems = document.getElementsByName("shouldDelete");
  // var table = document.getElementById("table");
  for (var i = 0; i < checkedItems.length; i++) {
    if (checkedItems[i].checked) {
      var row = document.getElementById("row" + i);
      row.remove();
    }
  }
}

Answer 5

您可以尝试这种方法来删除行：

function deleteRows() {
  // Fetch table from where rows needs to be removed
  var table = document.querySelector('#table');

  // Get all rows to loop over them
  var trs = table.rows;
  for (var i = 0; i < trs.length; i++) {

    // fetch checkbox and check if is selected
    if (trs[i].querySelector('[type=checkbox]').checked) {

      // Remove row
      table.deleteRow(i)

      // Update counter so inserting does not gives issues again
      counter--;
    }
  }
}

var counter = 0;

function addRow() {
  var table = document.getElementById("table");
  table.setAttribute("border", "1");
  var row = table.insertRow(counter);
  row.setAttribute("id", "row" + counter);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = document.getElementById("name").value;
  cell2.innerHTML = document.getElementById("url").value;

  var checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("name", "shouldDelete");
  checkbox.setAttribute("id", counter);
  cell3.appendChild(checkbox);

  counter = counter + 1;
}

function deleteRows() {
  var table = document.querySelector('#table');
  var trs = table.rows;
  for (var i = 0; i < trs.length; i++) {
    if (trs[i].querySelector('[type=checkbox]').checked) {
      table.deleteRow(i)
      counter--;
    }
  }
}

<h1>Tell me your URL:</h1>
<p>Add a new row</p>
<p>
  <label>Your name:</label>
  <input type="text" id="name">
</p>
<p>
  <label>Your URL:</label>
  <input type="text" id="url">
</p>
<p>
  <button onclick="addRow()">Add to bottom</button>
  <button onclick="deleteRows()">Delete selected row(s)</button>
</p>
<hr>
<table id="table"></table>

---

编辑

正如@RobG 正确指出的那样，我们应该使用table.rows，然后我们可以使用table.deleteRow(index) 而不是整个元素。

Answer 6

只是为了把我的帽子扔进擂台。 ;-)

我不知道您是否需要计数器和 ID 来处理其他事情，但它们不需要，因此我已将其删除。输入也不需要名称，但我将其留在这里以供后代使用。最后，仅设置元素的 innerHTML 比通过 DOM 方法添加元素要简单得多。

function addRow() {
  var table = document.getElementById("table");
  var row = table.insertRow();  // Inserts at end by default
  var cell1 = row.insertCell();
  var cell2 = row.insertCell();
  var cell3 = row.insertCell();

  cell1.textContent = document.getElementById("name").value;
  cell2.textContent = document.getElementById("url").value;
  cell3.innerHTML = '<input type="checkbox" name="shouldDelete">';
}

// Helper, go from el up to ancestor with tagName
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  while (el = el.parentNode) {
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

// Delete rows with checked checkboxes
function deleteRows() {
  var cbs = document.querySelectorAll('#table input:checked'); 
  [].forEach.call(cbs, function(cb) {
      var row = upTo(cb, 'tr');
      row && row.parentNode.removeChild(row);
  });
}

table {
  width: 50%;
}
th, td {
  border: 1px solid #999999;
}

 <h1>Tell me your URL:</h1>
<p>Add a new row</p>
<p>
  <label>Your name:</label>
  <input type="text" id="name">
</p>
<p>
  <label>Your URL:</label>
  <input type="text" id="url">
</p>
<p>
  <button onclick="addRow()">Add to bottom</button>
  <button onclick="deleteRows()">Delete selected row(s)</button>
</p>
<hr>
<table id="table"></table>