时间戳

首页 > 解决方案 > 在行内使用 checkox 隐藏表格行

javascript - 在行内使用 checkox 隐藏表格行

问题描述

我有一个表格，其中包含带有复选框的行和一些内容。这些行是使用 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>

我已经尝试过这个脚本，但它不起作用。你能给我一些关于这有什么问题的想法吗？

标签： javascriptphphtml

解决方案

第一：方法hiderow可以用事件对象修改：

function hiderow(event){
    event.target.parentElement.parentElement.style.display ="none";  
}

事件对象包含您的父节点的信息，tr因此只需将其隐藏即可。

第二：然后hiderow(event)在htmlonchange事件中添加为

onchange = "hiderow(event)

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

最终代码片段如下：

<table id="mytable">
<th>checkbox</th>
<th>Contents</th>
<tr>
<td><input type="checkbox" checked onchange = "hiderow(event)" /></td>
<td>Content1</td>
</tr>
<tr>
<td><input type="checkbox" checked onchange = "hiderow(event)"/></td>
<td>Content2</td>
</tr>
<tr>
<td><input type="checkbox" checked onchange = "hiderow(event)"/></td>
<td>Content3</td>
</tr>
<tr>
<td><input type="checkbox" checked onchange = "hiderow(event)"/></td>
<td>Content4</td>
</tr>
<table>
<script>
function hiderow(event){
    event.target.parentElement.parentElement.style.display ="none";    
}
</script>

推荐阅读