JQuery表格切换行问题

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

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

既然您说要动态创建此内容，我建议您在主表之外进行委托，而不是为每一行创建一个单击处理程序。此外，由于您想要显示/隐藏的所有内容都是同级的，而不是嵌套的，所以事情变得有点棘手。你需要通过传递一个过滤器来指定你的.nextUntil()，我发现过滤器上的:not()是必要的。

同样，因为它们都是兄弟，所以隐藏标题行的子项并不容易，所以我设置了一个" open“类来检查标题是否打开，并根据标题是否已经打开来隐藏/显示内容。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();
    }
});