javascript - 使用jQuery显示最接近所选的隐藏行

我对jQuery很陌生，但是当用户选择上方的（可见）行时，我试图显示最接近的隐藏表行。

的HTML

 Click on a row for more info:
<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr class="child"><td><p>Blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr class="child"><td><p>Blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr class="child"><td><p>Blah blah blah.</p>
    </td></tr>
</table>

jQuery的

$(function() {
    $("tr.child").hide();

    $("table").click(function(event) {
        event.stopPropagation();

        var $target = $(event.target);
        $target.closest("tr.child").toggle();
    });
});

这是fiddle。任何帮助表示赞赏。

最佳答案

.closest()遍历祖先的DOM结构。

对于给定的表结构，应使用.next()切换下一个tr

你可以做这样的事情

$("table tr").click(function(event) {
    $(this).next(".child").toggle();
});

这是一个演示https://jsfiddle.net/dhirajbodicherla/mfwYS/1166/

关于javascript - 使用jQuery显示最接近所选的隐藏行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30762024/