Question

我目前正在开发一个表格，可以扩展点击一行的详细信息。单击一行后，我希望其下方隐藏的<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>显示。我得到了正确的工作，但当我再次尝试隐藏它时，下面会出现一个我不想发生的白框。这是我的例子的小提琴：Technology Preview

HTML：

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

JS：

<tr>

如果您查看html，child类display:none;的设置为$target.closest('tr').find('.child').hide();即可开始隐藏。单击该行使其显示然后再次消失，它不会被完全隐藏并留下白色框。我试图让它在点击之前完全消失。

要做到这一点，我正在尝试tr.child隐藏它，但我无法让它正常工作。现在它永远不会进入if语句，检查是否显示最接近的DateTime.ParseExact("Mon Oct 17 00:00:00 UTC-0300 2016", @"ddd MMM dd hh:mm:ss ""UTC""zzz yyyy", CultureInfo.InvariantCulture) .ToString("dd/MM/yyyy"));并且无法找出原因。

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

虽然老实说我会非常劝阻玩这个事件。目标。它让事情变得混乱和模糊。您应该使选择器专门针对所需的行。

在表中使用.closest来隐藏行

2 个答案: