Question

我如何在此处修改代码，所以当我在表中添加新行时，它将与其中的复选框一起添加。在下面，我有一个从Internet复制的代码，用于删除我检查过的代码，因此，您能给我一个提示，如何也请修改它。

谢谢。尊敬的Umer Selmani

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

Answer 1

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

Answer 2

<!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.innerHTML = "NEW CELL3";
            var cb= document.createElement("input");
    cb.type = "checkbox";
    cell3.append(cb);
          }

          function myDeleteFunction() {
            $("#myTable tr").eq(0).remove();
          }

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

Answer 3

here you add myRow as a class to the row 
function myFunction() {
                  var table = document.getElementById("myTable");
                  var row = table.insertRow(-1);
                  row.classList.add("myRow");
                  var cell1 = row.insertCell(0);
                  var cell2 = row.insertCell(1);
                  var cell3 = row.insertCell(2);
                  cell1.innerHTML = "NEW CELL1";
                  cell2.innerHTML = "NEW CELL2";
                  var checkbox = document.createElement('input');
                  checkbox.type="checkbox";
                  cell3.appendChild(checkbox);
                }

                function myDeleteFunction() {
                //   document.getElementById("myTable").deleteRow(0);
                //   console.log("input[type='checkbox']"));
                  $(".myRow").find("input[type='checkbox']:checked")
                    .parent()
                    .parent()
                    .remove();

                }

在其中添加带有复选框的行

3 个答案: