1 
<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 也有点陌生。谢谢。

4

3 回答 3

1

添加一个复选框

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

然后调用 jquery 切换

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

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

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

<td class="hide">WC Claim Manager</td>
于 2013-09-04T19:25:41.583 回答
1

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

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


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

});

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

于 2013-09-04T19:25:54.480 回答
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.
    });
});

小提琴

如果您无法控制更改idto 类或添加类，那么您可以定位复选框

 $('#linkedin_match :checkbox').change(function(){...});
于 2013-09-04T19:27:17.237 回答