Question

我有一个表，其中包含一个带有复选框的行和一些内容。这些行是使用PHP从数据库创建的。

这是表格：

<table id="mytable">
   <th>checkbox</th>
   <th>Contents</th>
   <tr>
      <td><input type="checkbox" onchange="hiderow()" checked/></td>
     <td>Content1</td>
   </tr>
   <tr>
     <td><input type="checkbox" onchange="hiderow()" checked/></td>
     <td>Content2</td>
   </tr>
   <tr>
      <td><input type="checkbox" onchange="hiderow()" checked/></td>
      <td>Content3</td>
   </tr>
  <tr>
     <td><input type="checkbox" onchange="hiderow()" checked/></td>
     <td>Content4</td>
  </tr>
<table>

如您所见，复选框已经过检查。

我想要的是，当我取消选中一个复选框时，该行将被隐藏。例如，如果我取消选中第二行中的复选框，则会隐藏包含复选框和Content2的行。

<script>
function hiderow(){
    var i;
    var table = document.getElementById("mytable");//get the table
    var rows = tab.getElementByTagName("tr");//get the table rows
 //loop through each row
    for(i = 0; i < rows.length; i++){
        var td = rows[i].getElementByTagName("td")[0];//get the first td inside the row
        var checkbox = td.getElementByTagName("input");//get the input inside the td
            if(checkbox.checked == true){
                tr[i].style.display ="block";
            }else{
                tr[i].style.display ="none";
                }
    }
}


</script>

我尝试过这个脚本，但它不起作用。你能否就这个错误给我任何想法？

Answer 1

首先：可以使用事件对象修改package.json方法：

hiderow

事件对象包含父节点function hiderow(event){ event.target.parentElement.parentElement.style.display ="none"; }的信息，因此只需隐藏它即可。

第二：然后在html tr事件中添加hiderow(event)

onchange

只要复选框的值发生变化，就会触发此事件。

最终的代码段如下：

onchange = "hiderow(event)

使用checkox在行

1 个答案: