删除包含html形式行的复选框[关闭]答案

【问题标题】：Delete checkbox containing row in form of html [closed]删除包含html形式行的复选框[关闭]
【发布时间】：2016-10-27 23:55:27
【问题描述】：

<script>
function delBoxes(){
    var boxes = document.getElementsByClassName('chk');
    var texts = document.getElementsByClassName('txt');
    for(var i = 0; i<boxes.length; i++){
        box = boxes[i];
        txt = texts[i];
        if(box.checked){
            box.parentNode.removeChild(box);
            txt.parentNode.removeChild(txt);
        }
    }
}
</script>

<html>  

<body>
<form action="" method="post">
<table border="1" id="table">  
   <tr>  <td colspan="2">Select Technolgy:</td>   </tr>  
   <tr>  <td>c</td>  
      <td><input type="checkbox" name="techno[]" value="c" class='chk'></td>  
   </tr>  
   <tr>  <td>hadoop</td>  
      <td><input type="checkbox" name="techno[]" value="hadoop" class = 'chk'></td>  
   </tr>  
   <tr>   <td>core java</td>  
      <td><input type="checkbox" name="techno[]" value="Core JAVA"  class='chk'></td>  
   </tr>  

<input type="button" value="Click" id="btntest" />
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
</form>


</body>  
</html>

使用此代码，我可以取消选中的复选框。但是如何删除表单中包含表格行的选中复选框？

我已经阅读了this question，但对我没有帮助。

【问题讨论】：

如果我使用这个删除 jquery 库，那么我的服务器加载 javascript 和 juery 的负载将会增加，以避免我只在 javascript 中尝试

标签： javascript html forms html-table delete-row

【解决方案1】：

编辑你的代码你可以这样做

function delBoxes() {
  var boxes = document.getElementsByClassName('chk');
  var texts = document.getElementsByClassName('txt');
  for (var i = 0; i < boxes.length; i++) {
    box = boxes[i];
    if (box.checked) {
      rowTag = box.parentNode.parentNode;
      tableTag = box.parentNode.parentNode.parentNode;
      tableTag.removeChild(rowTag);
    }
  }
}

document.getElementById("deleteButton").addEventListener("click", delBoxes);

<form action="" method="post">
  <table border="1" id="table">
    <tr>
      <td colspan="2">Select Technolgy:</td>
    </tr>
    <tr>
      <td>c</td>
      <td>
        <input type="checkbox" name="techno[]" value="c" class='chk'>
      </td>
    </tr>
    <tr>
      <td>hadoop</td>
      <td>
        <input type="checkbox" name="techno[]" value="hadoop" class='chk'>
      </td>
    </tr>
    <tr>
      <td>core java</td>
      <td>
        <input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
      </td>
    </tr>

    <input type="button" value="Click" id="btntest" />
    <input type="checkbox" class='chk' />and
    <input type="text" class='txt' />
    <input type="button" id="deleteButton" value="Delete checked boxes" />
</form>

但是您必须考虑将设计更改为更好的东西。设置 ids 或 classes 并引用它们，而不是相对的“magic number of levels”。

如果您使用data-tech 属性标记行，那么您可以执行以下操作：

    function delBoxes() {
        var classname = document.getElementsByClassName("chk");
        for (var i = 0; i < classname.length; i++) {
          box = classname[i]
          if (box.checked) {
            elements = document.querySelectorAll('[data-tech="' + box.value + '"]');
            elements[0].parentNode.removeChild(elements[0]);
          }
        }
      }

      document.getElementById("deleteButton").addEventListener("click", delBoxes);

<form action="" method="post">
  <table border="1" id="table">
    <tr>
      <td colspan="2">Select Technolgy:</td>
    </tr>
    <tr data-tech="c">
      <td>c</td>
      <td>
        <input type="checkbox" name="techno[]" value="c" class='chk'>
      </td>
    </tr>
    <tr data-tech="hadoop">
      <td>hadoop</td>
      <td>
        <input type="checkbox" name="techno[]" value="hadoop" class='chk'>
      </td>
    </tr>
    <tr data-tech="Core JAVA">
      <td>core java</td>
      <td>
        <input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
      </td>
    </tr>

    <input type="button" value="Click" id="btntest" />
    <input type="checkbox" class='chk' /> and
    <input type="text" class='txt' />
    <input type="button" id="deleteButton" value="Delete checked boxes" />
</form>

【讨论】：

你能解释一下下面几行在 $checkbox1=$_POST['techno']; 中是如何工作的吗？ $chk=""; foreach($checkbox1 as $chk1) { $chk .= $chk1.""; echo ''; }
你能访问这个stackoverflow.com/questions/38035870/…
提供的代码将选定的值（一个值或数组）存储到 $checkbox1 中，然后遍历该数组并写入与元素一样多的“警报”。一般来说，我不高兴服务器端脚本编写内联 javascript 并发出警报。