Javascript 如何从表中隐藏所有tr（单击的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>

---

请建议我。

使用

兄弟姐妹

如下：

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

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

---

演示：

您需要在单击事件处理程序下运行代码，而不是在页面加载时运行。还请注意，

.not（此）

在使用

同级（）

时是多余的，因为原始元素无论如何都不会包括在内。试试这个：

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

---

为什么要隐藏所有的

tr

，然后显示当前

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

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