在 table 中使用 .closest 来隐藏一行

Question

我目前正在开发 table，它可以通过单击一行来扩展详细信息。单击一行后，我希望显示其下方隐藏的 <tr> 。我让它正常工作，但是当我再次尝试隐藏它时，下面会出现一个我不想出现的白框。这是我的示例的 fiddle：https://jsfiddle.net/pt0skyyb/

HTML:

<table class="table">
    <tr>
        <th>Details</th>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td>+</td>
        <td>First</td>
        <td>Second</td>
    </tr>
    <tr class="child">
        <td colspan="3">
            <table class="child-table">
                <tbody>
                    <tr>
                        <th>First</th>
                        <th>Second</th>
                        <th>Third</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

    <tr>
        <td>+</td>
        <td>Third</td>
        <td>Fourth</td>
    </tr>
    <tr class="child">
        <td colspan="3">
            <table class="child-table">
                <tbody>
                    <tr>
                        <th>First</th>
                        <th>Second</th>
                        <th>Third</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

JS:

$(function() {
    $("td[colspan=3]").find("table").hide();

    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        var $child = $target.closest('tr.child');
        var $next = $target.closest("tr").next();   
        if ( $child.hasClass("shown")) {
            $child.hide().removeClass("shown");
        } else {
            $next.show().addClass("shown").slideToggle();
        }                    
    });
});

如果您查看 html，<tr> 和 class child 开始设置为 display:none;，因此它被隐藏了。一旦您单击该行使其出现然后再次消失，它并没有被完全隐藏并留下一个白色框。我试图让它完全消失，就像它被点击之前一样。

为此，我正在尝试 $target.closest('tr').find('.child').hide(); 隐藏它，但无法使其正常工作。现在它永远不会进入 if 语句，检查是否显示最近的 tr.child 并且无法弄清楚为什么。

Answer 1

将您的 js 更改为关注。

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

UPDATED FIDDLE

Answer 2

如果您也想要接近原版的，这里有一个选项：

$(function() {
    $("td[colspan=3]").find("table").hide();

    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest('tr').next('.child').hasClass("shown")) {
            $target.closest('tr').next('.child').hide();
            $target.closest("tr").next('.child').removeClass("shown");
        } else { 
            $target.closest("tr").next().show();
            $target.closest("tr").next().addClass("shown");
            $target.closest("tr").next().find("table").slideDown();
        }                    
    });
});

尽管老实说，我非常不鼓励玩这个 event.target 东西。它使事情变得非常混乱和模糊。您应该使选择器专门针对所需的行。

在 table 中使用 .closest 来隐藏一行

Using .closest within a table to hide a row

html

javascript

jquery