Javascript - 按ID删除行

Question

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

＆＃13;

＆＃13;

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

＆＃13;

table {
  width: 50%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这就是我解决的问题：

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

<强>已更新

好的，我修好了。你需要在循环之前存储rownames并删除，因为一旦你删除了一个项目，你也会删除一个复选框，它开始指向你错误的元素。

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 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--;
    }
  }
}

＆＃13;

＆＃13;

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--;
    }
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改

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

Answer 4

为此，请尝试以下代码：

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--;
         }
    }

}

并在删除按钮上调用此函数单击如下：

在这里，＆＃34;数据表＆＃34;是一个表id。

Answer 5

试试这个：

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