如何使用jQuery/javascript使用Treetable插件影响/选择所有子体

How do I affect/select all descendants with Treetable plugin using jQuery / javascript

本文关键字：选择 影响 Treetable jQuery 何使用 javascript 使用 插件      更新时间：2023-09-26

我的一段HTML代码如下所示：

<tr data-tt-id="1">
    <td>Parent</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
    <td>Child 1</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="2">
    <td>Child 1's child</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
    <td>Child 2</td>
</tr>
<tr data-tt-id="5" data-tt-parent-id="3">
    <td>Child 2's child</td>
</tr>

我正在使用以下选项选择具有数据tt id="1"的父对象：

$('tr[data-tt-parent-id="1"]');

但我想要所有的孩子和孩子们的孩子，不管树有多深。

正如你所看到的，数据tt id是孩子的唯一id，数据tt父id是孩子附加到的id

我曾想过循环浏览其中的每一个，但我不知道该如何实现。如何为数据tt id设置为"1"的tr选择所有子体？

function getDescendants(el, curset) {
    curset = curset || $(""); // default to empty set
    var id = el.data('tt-id');
    var children = $("tr[data-tt-parent-id="+id+"]");
    if (children.length) {
        curset = curset.add(children);
        children.each(function() {
            curset = curset.add(getDescendants($(this), curset));
        });
    }
    return curset;
}

可能有更惯用的方法来写这篇文章，而不必在几个地方重新分配curset = ...，但这很有效。

演示

相关文章：