Question

我有一个用HTML编写的表单。在这种形式有2个按钮和一个表。表格中的每一行都包含一个复选框和2个文本字段。

按钮用于在表格中添加和删除行。 “删除”按钮仅适用于选中其复选框的行。他们使用onClick方法引用了下面<script>标记addRow(tableID)标记上的JavaScript编写的2种方法。

单击按钮时deleteRow(tableID)有效，但单击删除按钮时没有任何操作，该按钮引用addRow(tableID)方法。

这是表格的代码：

deleteRow(tableID)

编辑＃！：
我刚刚调试了上面的代码，我发现<form action="Page2.php" method="post" enctype="multipart/form-data">  <p> <input type="button" value="Add Contact" onClick="addRow('contacts')" /> <input type="button" value="Remove Contact" onClick="deleteRow('contacts')" /> <p>(All actions apply only to entries with check marked check boxes only.)</p> </p> <table id="contacts" class="form" border="1"> <tbody> <tr> <p> <td> <input type="checkbox" name="chk[]" checked="checked" /> </td> <td> <label>Address</label> <input type="text" name="ADDRESS[]" /> </td> <td> <label for="PHONE_NUMBER">Phone Number</label> <input type="text" class="small" name="PHONE_NUMBER[]" /> </td> </p> </tr> </tbody> </table> <script> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; if (rowCount < 10) { var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; } } else { alert("Maximum Contacts Number is 10"); } } function deleteRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { debugger; var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { if (rowCount <= 1) { alert("Cannot Remove all Contacts"); break; } table.deleteRow(i); rowCount--; i--; } } } </script>  <input type="submit" value="Proceed"> </form>方法中的变量chkbox和row在调试器中显示为deleteRow(tableID)。

我该怎么做才能解决这个问题？

Answer 1

问题是使用row.cells[0].childNodes[0]是一种非常脆弱的查找节点的方法。您正在检索文本节点而不是复选框。运用 childNodes即使对HTML进行微小更改也会中断。

更可靠的方法是query for the element您正在寻找

var chkbox = row.cells[0].querySelector('[type=checkbox]')

<form action="Page2.php" method="post" enctype="multipart/form-data">
  <!-- Contacts Details -->
  <p>
    <input type="button" value="Add Contact" onClick="addRow('contacts')" />
    <input type="button" value="Remove Contact" onClick="deleteRow('contacts')" />
    <p>(All actions apply only to entries with check marked check boxes only.)</p>
  </p>
  <table id="contacts" class="form" border="1">
    <tbody>
      <tr>
        <p>
          <td>
            <input type="checkbox" name="chk[]" checked="checked" />
          </td>
          <td>
            <label>Address</label>
            <input type="text" name="ADDRESS[]" />
          </td>
          <td>
            <label for="PHONE_NUMBER">Phone Number</label>
            <input type="text" class="small" name="PHONE_NUMBER[]" />
          </td>
        </p>
      </tr>
    </tbody>
  </table>
  <script>
    function addRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      if (rowCount < 10) {
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for (var i = 0; i < colCount; i++) {
          var newcell = row.insertCell(i);
          newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
      } else {
        alert("Maximum Contacts Number is 10");
      }
    }

    function deleteRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      for (var i = 0; i < rowCount; i++) {
          debugger;
        var row = table.rows[i];
        var chkbox = row.cells[0].querySelector('[type=checkbox]');
        if (null != chkbox && true == chkbox.checked) {
          if (rowCount <= 1) {
            alert("Cannot Remove all Contacts");
            break;
          }

          table.deleteRow(i);
          rowCount--;
          i--;
        }
      }
    }
  </script>

  <!-- Form Sending -->
  <input type="submit" value="Proceed">
</form>

当其他功能工作时，JavaScript中的功能不起作用

1 个答案: