Javascript 添加包含复选框的行_Javascript_Html

Javascript 添加包含复选框的行

javascript html

Javascript 添加包含复选框的行,javascript,html,Javascript,Html,如何在这里修改代码，以便在表中添加新行时，它将与其中的复选框一起添加下面我从网上复制了一个代码，用来删除我检查过的代码。我怎样才能修改它呢桌子运输署{ 边框：1px纯黑； } R1 C1 R1 C2 R2 C1 R2 C2 第3行第1单元第3行第2单元添加行删除行函数myFunction（）{ var table=document.getElementById（“myTable”）； var行=table.insertRow（-1）； var cell1=行插入单元格（0）；

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

下面我从网上复制了一个代码，用来删除我检查过的代码。我怎样才能修改它呢


桌子
运输署{
边框：1px纯黑；
}
R1 C1
R1 C2
R2 C1
R2 C2
第3行第1单元
第3行第2单元
添加行
删除行
函数myFunction（）{
var table=document.getElementById（“myTable”）；
var行=table.insertRow（-1）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=“新建cell1”；
cell2.innerHTML=“新建cell2”；
细胞3；
}
/*$（“按钮”）。单击（函数（）{
$（“表输入[type='checkbox']：选中”）
.parent（）
.parent（）
.remove（）；
});*/


桌子
运输署{
边框：1px纯黑；
}
R1 C1
R1 C2
R2 C1
R2 C2
第3行第1单元
第3行第2单元
添加行
删除行
函数myFunction（）{
var table=document.getElementById（“myTable”）；
var行=table.insertRow（-1）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）
cell1.innerHTML=“新建cell1”；
cell2.innerHTML=“新建cell2”；
让复选框=document.createElement（“输入”）
checkbox.type=“checkbox”
单元格3.追加（复选框）
}
函数myDeleteFunction（）{
document.getElementById（“myTable”）.deleteRow（0）；
}
/*$（“按钮”）。单击（函数（）{
$（“表输入[type='checkbox']：选中”）
.parent（）
.parent（）
.remove（）；
});*/
````


桌子
运输署{
边框：1px纯黑；
}
R1 C1
R1 C2
R2 C1
R2 C2
第3行第1单元
第3行第2单元
添加行
删除行
函数myFunction（）{
var table=document.getElementById（“myTable”）；
var行=table.insertRow（-1）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=“新建cell1”；
cell2.innerHTML=“新建cell2”；
cell3.innerHTML=“新建cell3”；
var cb=document.createElement（“输入”）；
cb.type=“复选框”；
细胞3.附加（cb）；
}
函数myDeleteFunction（）{
$（“#myTable tr”）.eq（0）.remove（）；
}
/*$（“按钮”）。单击（函数（）{
$（“表输入[type='checkbox']：选中”）
.最近的（“tr”）
.remove（）；
});*/

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

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

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();

                }