选中复选框时，隐藏表格中的其他行 [英] Hiding other rows in a table when checkbox is selected

问题描述

 < table id =linkedin_match> 
< tr> 
< th>名称< / th> 
< th>位置< / th> 
行业< / th> 
< th>公司< / th> 
< th>位置< / th> 
 th& nbsp;< / th> 
 th& nbsp;< / th> 
< / tr> 
< tr> 
< td>摩西冈萨雷斯< / td> 
< td>大西雅图地区< / td> 
< td>化学品< / td> 
< td>卓越杂货店< / td> 
< td> WC理赔经理< / td> 
< td>< a href =＃>邀请< / a>< / td> 
< td>< input type =checkboxid =match/>< / td> 
< / tr> 
< tr> 
< td>摩西冈萨雷斯< / td> 
< td>大西雅图地区< / td> 
< td>化学品< / td> 
< td>卓越杂货店< / td> 
< td> WC理赔经理< / td> 
< td>< a href =＃>邀请< / a>< / td> 
< td>< input type =checkboxid =match/>< / td> 
< / tr> 
< / table> 
  

使用上面的表格，我将如何执行逻辑，如果选中复选框，其他行会隐藏？行不仅限于两个。它可能是五个，可能是十个，可能只有一个。目前我的代码是：

  $（'document'）。ready（function（）{
 var tr = $ （'#linkedin_match tr'）; 
}）; 
  

现在我不知道如何处理tr。我对JS也很陌生。谢谢。

解决方案

你可以这样做。 ids 必须是唯一的，因此请将匹配作为类名。

  $（document）.ready（function（）{
 $（'＃linkedin_match .match'）。change（function（）{//将更改事件绑定到复选框
 var $ this = $（this）; 
 $（'＃linkedin_match'）。find（'tr：gt（0）'）。not（$ this.closest（'tr'））。 toggle（）; 
 //因为所有的trs都是可见的，所以你可以使用切换来切换所有的trs，但不是这个的父节点。
 //取消检查将把所有的trs到可见状态
}）; 
}）; 
  

小提琴

如果您无法控制更改 id 然后你可以定位复选框

$ $ $ $''＃linkedin_match：checkbox'）。change（function （）{...}）;

• gt（0） - 选择index大于0的行。ie避免第一个。 a href =http://api.jquery.com/closest/ =nofollow>最接近（'tr'） - 获取选中元素的父tr。


• 不是（$ this.closest（'tr'）） - 要添加过滤器。即排除当前行。


• toggle（） - 切换元素的状态。

<table id="linkedin_match">
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Industry</th>
                <th>Company</th>
                <th>Position</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td>Moses Gonzales</td>
                <td>Greater Seattle Area</td>
                <td>Chemicals</td>
                <td>Superior Grocers</td>
                <td>WC Claim Manager</td>
                <td><a href="#">Invite</a></td>
                <td><input type="checkbox" id="match"/></td>
            </tr>
            <tr>
                <td>Moses Gonzales</td>
                <td>Greater Seattle Area</td>
                <td>Chemicals</td>
                <td>Superior Grocers</td>
                <td>WC Claim Manager</td>
                <td><a href="#">Invite</a></td>
                <td><input type="checkbox" id="match"/></td>
            </tr>
        </table>

With the table above, how would I perform the logic, such that if the checkbox is selected, the other rows will hide? The rows are not limited to just two. It could be five, it could be ten, it can be just one. Currently my code is :

$('document').ready(function() {
   var tr = $('#linkedin_match tr');
});

Now I don't know what to do with the tr. I'm kinda new to JS too. Thanks.

解决方案

You can do this way. ids must be unique so change match as class name.

$(document).ready(function() {
    $('#linkedin_match .match').change(function(){ //bind change event to the checkboxes
        var $this = $(this);
        $('#linkedin_match').find('tr:gt(0)').not($this.closest('tr')).toggle();
        //since all trs are visible you can use toggle to toggle all the trs but not the one that is a parent of this.
       //And un checking will bring all of them back to visible state.
    });
});

Fiddle

if you have no control over changing the id to class or add a class, then you can target the checkbox

 $('#linkedin_match :checkbox').change(function(){...});

• gt(0) - To select the rows with index greater than 0. i.e to avoid the first one.
• closest('tr') - To get the parent tr of the checked element.
• not($this.closest('tr')) - To add a filter. i.e to exclude the current row.
• toggle() - To toggle the element's state.

这篇关于选中复选框时，隐藏表格中的其他行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！