Question

我有一个带有此文件的表单，通过ADD按钮我可以添加行。要删除我已经放置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--;
        }
    }
}

如果复选框在右侧表单上，如何删除行？

我希望解释我的问题。感谢

Answer 1

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

将其更改为：

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

Answer 2

正如其他地方所指出的，在Roljhon的回答中，问题就在于：

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

要解决此问题，您可以将索引从row.cells[0]更改为正确的索引（此处，如答案中所述，为6），或者您可以使其更灵活，只需使用相应的CSS选择器和<input>]从指定的<tr>（row）变量中选择相应的Element.querySelector()元素：

// here we look within the <tr> represented by the 'row' variable:
var chkbox = row
  // using Element.querySelector():
  .querySelector(
    // to find the first (if any) <input> element, with
    // its 'type' attribute equal to 'checkbox' and its
    // 'name' attribute equal to the string 'chk[]'
    // (the square brackets are escaped because otherwise
    // they're recognised as part of the CSS selector):
    'input[type=checkbox][name="chk\[\]"]'
  );

＆＃13;

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.querySelector('input[type=checkbox][name="chk\[\]"]');
    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--;
    }
  }
}

＆＃13;

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

＆＃13;

JS Fiddle demo

参考文献：

Javascript - 添加后删除行

2 个答案: