Question

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

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

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

现在我不知道如何处理tr。我也是JS的新手。感谢。

Answer 1

添加复选框

<input type="checkbox" class="check"> Check me

然后调用jquery切换

$('.check').click(function(){
    $('td.hide').toggle();
});

小提琴：http://jsfiddle.net/webbymatt/DLxjR/

P.S。在我的例子中，我在要隐藏的单元格上放了一个类，这也可以应用于整行。在这种情况下：

<td class="hide">WC Claim Manager</td>

Answer 2

首先，您不应该有两个具有相同ID的元素。将这些更改为类，您可以执行以下操作：

$(document).on('click', '.match', function(){ 


    if ($(this).is(':checked')) { 
        $('.match').closest('tr').hide();
        $(this).closest('tr').show(); 
    } else { $('.match').closest('tr').show(); }

});

此解决方案将在未选中框时显示所有带复选框的行，并仅在选中复选框时显示相关行。

Answer 3

你可以这样做。 ids必须是唯一的，因此请将match更改为类名。

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

如果您无法控制将id更改为类或添加类，则可以定位复选框

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

gt(0) - 选择索引大于0的行，即避免第一行。
closest('tr') - 获取已检查元素的父tr。
not($this.closest('tr')) - 添加过滤器。即排除当前行。
toggle() - 切换元素的状态。

选中复选框时隐藏表中的其他行

3 个答案: