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();
    });
});

Example fiddle

Answer 3

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

DEMO

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

3 个答案: