Javascript-添加后删除行

我有一个带有此字段的表单，通过“添加”按钮可以添加行。要删除行，我使用了put deleteRow函数，但只有当复选框位于表单左侧时，该函数才起作用。该复选框必须位于正确的窗体上，按delteRow键时，不能工作

以下是脚本：

<form name="books">
  <button type="button" onClick="addRow('dataTable')">  ADD Book </button>
  <button type="button" onClick="deleteRow('dataTable')">  DEL Book </button>
  <table id="dataTable" class="form">
    <tr>
      <td>Date: 
      <td><input type="text" class="form-control" name="date_book[]">
      <td>Pages:
      <td><input type="text" class="form-control" name="book_pages[]">
      <td>Pages total:
      <td><input type="text" class="form-control" name="book_pages_total">
      <td width="51"><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
  </table>
</form>

Javascript函数：

function addRow(tableID) {
  var table = document.querySelector('#' + tableID);
  var lastRow = table.rows[table.rows.length - 1];

  // Create a new row by cloning the last one
  var newRow = lastRow.cloneNode(true);
  var inputs = newRow.querySelectorAll('input');

  // Clear all but first input
  [].forEach.call(inputs, (input, i) => {if (i) input.value = '';}); 

  // Add the row to the table
  lastRow.parentNode.appendChild(newRow);
}


function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    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) {
            if(rowCount <= 1) {                         // limit the user from removing all the fields
                alert("You do not remove all rows");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

当复选框位于正确的窗体上时，如何删除行

我希望能解释我的问题。

---

感谢您指向错误的单元格[0]，它指向的是第一个单元格，而不是复选框所在的第六个单元格

将其更改为：

var chkbox = row.cells[6].childNodes[0];

---

当您指向错误的单元格[0]时，它会指向复选框所在的第一个单元格，而不是第六个单元格

将其更改为：

var chkbox = row.cells[6].childNodes[0];

---

正如其他地方指出的那样，在罗尔洪的回答中，问题在于：

var chkbox = row.cells[0].childNodes[0];

要更正此问题，您可以将索引从row.cells[0]更改为此处的正确索引，如该答案中所述，它将为6，或者您可以使其更灵活，只需使用适当的CSS选择器和element.querySelector]从指定的行变量中选择适当的元素即可：

函数addRowtableID{ var table=document.querySelector+tableID； var lastRow=table.rows[table.rows.length-1]； //通过克隆最后一行来创建新行 var newRow=lastRow.cloneNodetrue； var inputs=newRow.queryselectoral'input'； //清除除第一个输入外的所有输入 []forEach.callinputs，输入，i=>{ 如果我输入.value=； }; //将行添加到表中 lastRow.parentNode.appendChildnewRow； } 函数deleteRowtableID{ var table=document.getElementByIdtableID； var rowCount=table.rows.length； 对于变量i=0；i如果rowCount如Roljhon在其他地方所指出的，那么问题在于：

var chkbox = row.cells[0].childNodes[0];

要更正此问题，您可以将索引从row.cells[0]更改为此处的正确索引，如该答案中所述，它将为6，或者您可以使其更灵活，只需使用适当的CSS选择器和element.querySelector]从指定的行变量中选择适当的元素即可：

函数addRowtableID{ var table=document.querySelector+tableID； var lastRow=table.rows[table.rows.length-1]； //通过克隆最后一行来创建新行 var newRow=lastRow.cloneNodetrue； var inputs=newRow.queryselectoral'input'； //清除除第一个输入外的所有输入 []forEach.callinputs，输入，i=>{ 如果我输入.value=； }; //将行添加到表中 lastRow.parentNode.appendChildnewRow； } 函数deleteRowtableID{ var table=document.getElementByIdtableID； var rowCount=table.rows.length； 对于变量i=0；i如果rowCount应该是row.cells[5]：应该是row.cells[5]：谢谢David。工作顺利！谢谢David。工作顺利！