javascript - html javascript 折叠/展开表格行，子行

Question

我想在单击行时折叠/展开表行。我通过 javascript 动态添加行和子行。这是我的截图

在图像中您可以看到两个按钮，即添加规则和添加评论。当我单击添加规则时，它会添加到父行上。当我选择父行并单击添加注释时，它会添加子行。

有 5 行。第一行，即第 0 行中的单元格，它包含三个子行子行 0、子行 1、子行 2。在子行 2 中，它包含自己的子行 3。

此处 javascript 代码用于折叠/隐藏行

function GetSelectedRow(obj) 
{
    trID = obj.id;
    var SelRow = document.getElementById(trID);
    SelRow.setAttribute("bgcolor", "#808080");
    //return obj.id;
    //alert(trID);

    var children = getChildren($(obj));
    $.each(children, function () {
        $(this).toggle();
    })
}
//---------------- get all child element to collapse-------------
function getChildren($row) {
    var children = [], level = $row.attr('data-id');
    while ($row.next().attr('data-parent') == level) {          
        children.push($row.next());
        $row = $row.next();
    }
    return children;
}

当我点击父行，即第0行中的单元格时，它会调用方法GetSelectedRow并折叠其所有子行(子行0，子行1 ，子行 2)。但问题出在子子行(子行 3)中。它没有崩溃。看这里是我折叠的图像。

在图像中，您可以看到我选择了第一行，它折叠了所有子行，但在 subchild 中出现问题。如何折叠所有行，包括 child 和 sub child？

编辑这是我的 html 代码

<input type="button" onclick="AddRule()" value="Add Rule" />
<input type="button" onclick="AddComments()" value="Add Comments" />
<table id="myTable" class="collaptable">
    <thead>
        <tr>
            <th>Rule Discription
            </th>

            <th>Primary Module
            </th>

            <th>Model
            </th>

            <th>Shop Call Number
            </th>

            <th>EWR
            </th>

            <th>Suggested Rule Effective Date
            </th>

            <th>Rule Contents
            </th>

            <th>Reason
            </th>

            <th>Rule Note
            </th>

            <th>Level
            </th>

            <th>Children
            </th>
        </tr>
    </thead>
    <tbody id="mybody">
    </tbody>
</table>

jsFiddle 链接 https://jsfiddle.net/18uxxnuc/

但我不明白为什么它在那里不起作用。我已经在那里添加了所有代码。

我想我必须使用像递归函数。

编辑

我尝试了 jquery 插件 aCollapTable和 github我已在 AddComment 方法中添加了此功能。但问题是，每次添加子行时都会添加+/-。请参阅JsFiddle演示。我不知道为什么这个插件 aCollapTable 在那里不起作用。

Answer 1

$(document).on('click','tr',function(){

$(this).slideToggle()

})