使用复选框删除行？

Question

我尝试使用复选框删除行但似乎只是返回错误TypeError: Cannot read property childNodes of undefined

＆＃13;

＆＃13;

function deleteRowFromTable(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length - 1;
    alert(rowCount);
    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {

        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }

  } catch (e) {
    alert(e);
  }
}

function addRowToTable(tableID) {
  var table = document.getElementById(tableID);
  var jobValue = jobValue + 1; //increase personVal by 1
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  //            var colCount = table.rows[0].cells.length;
  //generate textbox here with dynamic id by adding jobVal at the end of id and '-'(dash) is used to split id later 
  var newcell = row.insertCell(0);
  newcell.innerHTML = "<input type='checkbox' name='chk' />";
  var newcell = row.insertCell(1);
  newcell.innerHTML = "<input type='text' name='txtLineofBusiness-" + jobValue + "' id='txtLineofBusiness-" + jobValue + "' class='txtLineofBusiness'  required/>";
  var newcell = row.insertCell(2);
  newcell.innerHTML = "<input type='text' name='txtNofUnits-" + jobValue + "' id='txtNofUnits-" + jobValue + "' class='txtNofUnits' required/>";
  var newcell = row.insertCell(3);
  newcell.innerHTML = "<input type='text' name='txtCapital-" + jobValue + "' id='txtCapital-" + jobValue + "' class='txtCapital' required/>";
  var newcell = row.insertCell(4);
  newcell.innerHTML = "<input type='text' name='txtEssential-" + jobValue + "' id='txtEssential-" + jobValue + "' class='txtEssential' required/>";
  var newcell = row.insertCell(5);
  newcell.innerHTML = "<input type='text' name='txtNonEssential-" + jobValue + "' id='txtNonEssential-" + jobValue + "' class='txtNonEssential' required/>";


}

＆＃13;

<input type="button" value="Add Rows" onclick="addRowToTable('tableId')">
<input class="col-md-2" type="button" value="Delete Row/s" onclick="deleteRowFromTable('tableId')">
<table id="tableId">
  <thead>
    <tr>
      <th rowspan=2>#</th>
      <th rowspan=2>Line of Business</th>
      <th rowspan=2>No. of Units</th>
      <th rowspan=2>Capitalization</th>
      <th colspan="2">Gross /Sales Receipts </th>
    </tr>
    <tr>
      <th>Essential</th>
      <th>Non-essential</th>

    </tr>
  </thead>
</table>

＆＃13;

＆＃13;

＆＃13;

我没有默认的表格行。我试图添加一些成功的行，但删除行不起作用。请帮忙。

Answer 1

这是删除行功能的另一种方法

function deleteRowFromTable(tableID) {
  var table = document.getElementById(tableID);

  // get a list of just the checked checkboxes
  var chks = table.querySelectorAll("input[type=checkbox]:checked");

  for (var i=0; i < chks.length; i++) {
    // locate the tr element relative to the checkbox
    var tr = chks[i].parentNode.parentNode;
    tr.parentNode.removeChild(tr);
  }
}