Javascript JQuery表切换行问题

我有一个正在动态创建的表。 我希望表中不再有任何属性（如ID字段）。 它是一个多级表，在该表中，所有表行都应该是可展开的，并且在每行的任何TD中单击时都可以折叠

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

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

看这把简化的小提琴：

这基本上是三个层次，这里有很多问题。 一个明显的例子是，当你在第二层时，这被称为“kommune”，如果你点击最后一个TR，它会删除下面的“fylke”。如您所见，单击“MIDTRE GAULDAL” 这可能是因为我使用了

.Parent（）

，需要某种if检查我是否在最后一行

这段代码还有其他问题吗？我是否可以在更一般的级别上指定单击方法

class=“fylke\u click”

和

class=“kom\u click”

？

---

例如，对于所有的

，每个TD类都将有

class=“fylke\u click”

，对于

Kommune

？

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

因为您说过要动态创建此内容，所以我建议将主表外的内容委派，而不是为每一行创建一个单击处理程序。此外，由于所有要显示/隐藏的内容都是同级的，而不是嵌套的，所以事情变得有点棘手。你需要通过传递一个过滤器来指定你的

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