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

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

你可以这样做。 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() - 切换元素的状态。