Question

我有动态创建的表。我想尽量不在表中有任何属性（比如ID字段）。它是一个多级表，其中所有TableRows都应该是可扩展的，并且在每行的任何TD中单击时都会折叠。

$('.fylke_click').click(function () {
    $(this).parent().nextUntil('.fylke').slideToggle(0);
    $('.sted').hide();
});

$('.kom_click').click(function () {
    $(this).parent().nextUntil('.kommune').slideToggle(0);
});

看到这个简化的小提琴： http://jsfiddle.net/T2Lwn/

所以它基本上是3级，这里有很多问题。一个显而易见的是当你在第二级时，称为“kommune”，如果你点击最后一个TR，它将删除下面的“fylke”。正如您所看到的，如果您点击“MIDTRE GAULDAL” 这可能是因为我使用.Parent()并且我需要某种检查我是否在最后一行？

这段代码还有其他问题吗？我可以在更一般的级别指定点击方法class="fylke_click"和class="kom_click"吗？例如，对于所有<tr class="fylke">，每个TD类都有class="fylke_click"，kommunne也相同？

Answer 1

如果我理解你的问题，这可能会有所帮助：

<强> Demo Fiddle:

由于您说您将动态创建此内容，因此我建议您委派主表，而不是为每一行创建一个点击处理程序。此外，由于您想要显示/隐藏的所有内容都是兄弟姐妹而不是嵌套，因此事情变得有点棘手。您需要通过传递过滤器来明确.nextUntil()，并且我发现过滤器上需要:not()。

同样，因为这些都是兄弟姐妹，所以它不像隐藏标题行的孩子那么容易，所以我设置了一个＆＃34; open＆＃34;用于检查标头是否打开的类，并根据它是否已打开来隐藏/显示内容。 JS：

$('.kommune').hide();
$('.sted').hide();

$('.table').on('click', 'tr', function(){
    $this = $(this);

    if( $this.hasClass('fylke') ){
        if ( $this.hasClass('open') ) {
            $this.toggleClass('open').nextUntil('.fylke', 'tr').hide();
        }
        else {
            $this.toggleClass('open').nextUntil('.fylke', 'tr:not(.sted)').toggle();
        }
    }
    else if ( $this.hasClass('kommune') ){
        $this.nextUntil('.kommune', 'tr:not(.fylke)').toggle();
    }
});

JQuery表切换行问题

1 个答案: