时间戳

首页 > 解决方案 > 添加一个带有复选框的行

javascript - 添加一个带有复选框的行

问题描述

我如何在这里修改代码，所以当我在表格中添加新行时，它将与其中的复选框一起添加。

在下面我有一个从互联网复制的代码，以删除我检查过的代码。我怎样才能修改那个呢？

<!DOCTYPE html>
    <html>
      <head>
        <style>
          table,
          td {
            border: 1px solid black;
          }
        </style>
      </head>
    
      <body>
        <table id="myTable">
          <tr>
            <td>R1 C1 </td>
            <td>R1 C2 </td>
            <td><input type="checkbox" /></td>
          </tr>
          <tr>
            <td>R2 C1 </td>
            <td>R2 C2 </td>
            <td><input type="checkbox" /></td>
          </tr>
          <tr>
            <td>Row3 cell1</td>
            <td>Row3 cell2</td>
            <td><input type="checkbox" /></td>
          </tr>
        </table>
        <button type="button" onclick="myFunction()">Add row</button>
        <button onclick="myDeleteFunction()">Delete row</button>
    
        <script>
          function myFunction() {
            var table = document.getElementById("myTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            cell1.innerHTML = "NEW CELL1";
            cell2.innerHTML = "NEW CELL2";
            cell3;
          }
    
          /*$("button").click(function() {
            $("table input[type='checkbox']:checked")
              .parent()
              .parent()
              .remove();
          });*/
        </script>
      </body>
    </html>

标签： javascripthtml

解决方案

<html>
  <head>
    <style>
      table,
      td {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <table id="myTable">
      <tr>
        <td>R1 C1 </td>
        <td>R1 C2 </td>
        <td><input type="checkbox" /></td>
      </tr>
      <tr>
        <td>R2 C1 </td>
        <td>R2 C2 </td>
        <td><input type="checkbox" /></td>
      </tr>
      <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
        <td><input type="checkbox" /></td>
      </tr>
    </table>
    <button type="button" onclick="myFunction()">Add row</button>
    <button onclick="myDeleteFunction()">Delete row</button>

    <script>
      function myFunction() {
        var table = document.getElementById("myTable");
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2)
        cell1.innerHTML = "NEW CELL1";
        cell2.innerHTML = "NEW CELL2";
        let checkbox = document.createElement("input")
        checkbox.type = "checkbox"
        cell3.append(checkbox)
      }

      function myDeleteFunction() {
        document.getElementById("myTable").deleteRow(0);
      }

      /*$("button").click(function() {
        $("table input[type='checkbox']:checked")
          .parent()
          .parent()
          .remove();
      });*/
    </script>
  </body>
</html>````

推荐阅读