Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 1

编辑代码就可以这样做

NavigableSet dates = new TreeSet( 3 );
dates.add( LocalDate.parse( "2008-10-01" );
dates.add( LocalDate.parse( "2008-10-02" );
dates.add( LocalDate.parse( "2008-10-04" );
LocalDate target = LocalDate.parse( "2008-10-03" );
LocalDate hit = dates.lower( target );
// Reminder: test for `null == hit` to see if anything found.

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

但你必须考虑将设计改为更好的东西。设置id或类并引用它们，而不是相对的“幻数级别”。

如果您使用<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>属性标记行，那么您可以执行以下操作：

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

删除包含html格式的行的复选框

1 个答案: