Javascript 使用jquery切换表行

我有一个普通的html表格

每个

都有属性

数据id

和

数据父id

我想在单击

时切换底层

我提出了一个简短而糟糕的解决方案：

$("tr[data-id]").click(function () {
    var id = $(this).attr("data-id"); // get id from clicked tr

    $(this).siblings('tr[data-parent-id="' + id + '"]').each(function () { // iterate through all tr under clicked tr
        $(this).toggle(); // toggle first level under clicked tr
        var id = $(this).attr("data-id"); // get id from first level under clicked tr

        $(this).siblings('tr[data-parent-id="' + id + '"]').each(function () { // iterate through all tr under first level under clicked tr
            $(this).toggle(); // toggle _second level_ under clicked tr
            var id = $(this).attr("data-id"); // get id from _second_ level under clicked tr

            $(this).siblings('tr[data-parent-id="' + id + '"]').each(function () { // iterate through all tr under second level under clicked tr
                $(this).toggle(); // toggle _third_ level under clicked tr
            });
        });
    });
});

在我的示例中，我循环遍历每个级别，但我不知道如何进行“永无止境”遍历。我只指定了3个级别的

，但它应该是无限的

这似乎是我想要的，但我认为这可以做得简单得多，当我有一个巨大的表时，我认为最好用css隐藏折叠的表行，而不是等待javascript这样做（它会因为加载而闪烁）

如果任何其他

具有其

数据id

作为

数据父id

，我如何进行循环来检查每个

编辑：

Html

您需要递归性：

$("tr[data-id]").click(function () {
    Expand($(this).attr("data-id"));
}

function Expand(id)
{
     $('tr[data-parent-id="' + id + '"]').each(function () {
         $(this).toggle();
         Expand($(this).attr("data-id"));
     });
}

---

你必须小心递归性，因为它可能会产生无限循环。在这种情况下，当到达没有数据父id（根）的tr时，它将停止

你说的等级是什么意思。。？你的

里面有

吗？如果是这样，我认为它是无效的

HTML

。请提供复制此内容所需的示例

HTML

和

CSS

。这只是一个愚蠢的问题，但如果您使用的是数据属性，为什么不使用

.data（）

而不是

.attr（）

？我已使用示例HTML:-）进行了更新

$("tr[data-id]").click(function () {
    Expand($(this).attr("data-id"));
}

function Expand(id)
{
     $('tr[data-parent-id="' + id + '"]').each(function () {
         $(this).toggle();
         Expand($(this).attr("data-id"));
     });
}