Question

我有一个普通的html表。

每个<tr>都有data-id和data-parent-id属性。

点击<tr>时，我希望切换基础<tr>。

我做了一个简短的坏解决方案：

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

在我的例子中，我遍历每个级别，但我不知道如何制作一个永无止境的＆＃34;遍历。我只指定了<tr>的3个级别，但它应该是无限的。

似乎http://ludo.cubicphuse.nl/jquery-treetable/做了我想要的，但我认为它可以做得更简单，当我有一个巨大的表时，我认为用css隐藏折叠的表行而不是等待更好对于javascript这样做（由于加载而闪烁）。

如果其他<tr> <tr>的{{1}}为data-id，我怎样才能创建一个检查每个data-parent-id的循环？

修改：

HTML

<table>
  <tbody>
    <tr data-id="1" data-parent-id=""></tr>
    <tr data-id="2" data-parent-id="1"></tr>
    <tr data-id="3" data-parent-id="1"></tr>
    <tr data-id="4" data-parent-id="3"></tr>
    <tr data-id="5" data-parent-id="4"></tr>
  </tbody>
</table>

Answer 1

你需要递归：

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

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

使用jquery切换表行

1 个答案: