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

时间:2013-09-04 19:19:34

标签: javascript html

<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的新手。感谢。

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

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

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


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

});

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

答案 2 :(得分:1)

你可以这样做。 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(){...});