除了点击一个之外，如何隐藏表中的所有tr

Question

我想隐藏表中的所有<tr> ，除了我点击的那些。

<table>
    <tr>
        <td>ABC</td>
        <td>DEF</td>
        <td><i class="delete">delete </i></td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>DEF</td>
        <td><i class="delete">delete </i></td>
    </tr>
</table>

单击删除按钮会隐藏除当前之外的所有行。

Jquery代码： -

$(document).ready(function () {
    $('table tbody tr').siblings().not($(this)).hide();
});

请建议我。

Answer 1

使用siblings如下：

请参阅代码中的内联注释：

// Bind click event on `tr` inside `table`
$('table').on('click', 'tr', function () {
    // Show current `tr` and hide others
    $(this).siblings().hide();
});

演示： http ： //jsfiddle.net/tusharj/LL0c2efg/

Answer 2

您需要在单击事件处理程序下运行代码，而不是在页面加载时运行。 另请注意， .not(this)在使用siblings()时是多余的，因为无论如何都不会包含原始元素。 尝试这个：

$(document).ready(function() {
    $('table tbody tr').click(function() {
        $(this).siblings().hide();
    });
});

示例小提琴

Answer 3

$(document).ready(function () {
    $('table tbody tr').click(function(){
        $('table tbody tr').hide();
        $(this).show();
    })
});  

DEMO