Javascript - 添加后删除行

Question

我有一个包含此字段的表单，通过“添加”按钮我可以添加行。为了删除行，我放置了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

正如其他地方所指出的，在 Roljhon 的回答中，问题在于这一行:

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

要纠正此问题，您可以将索引更改为 row.cells[0]到正确的索引(正如该答案中所述，它是 6 )或者您可以使其更加灵活，只需选择适当的 <input>指定 <tr> 中的元素( row )变量，使用适当的 CSS 选择器和 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\[\]"]'
  );

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

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

JS Fiddle demo .

引用文献:

• CSS:
  • CSS Attribute Selectors .
• JavaScript
• Element.querySelector() .