Question

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

在图片中，您可以看到两个按钮，Add rule and add comments。当我点击添加规则时，它会在父行上添加。当我选择父行并单击添加注释时，它会添加子行。

有5行。第一行，即cell in row 0，它包含三个子行child row 0,child row 1,child row 2。在child row 2中，它包含了自己的child row 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;
}

当我点击父行，即cell in row 0时，它会调用方法GetSelectedRow并折叠其所有子行（child row 0, child row 1, child row 2）。但问题出现在子子行（child row 3）中。它并没有崩溃。看到这里是我的折叠图像。

在图片中，您可以看到我已选择第一行并且它会折叠所有子行但在subchild中出现问题。如何折叠所有行，包括child and 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/

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

我想我必须使用类似recursive的功能。

修改

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

Answer 1

＆＃13;

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

＆＃13;

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

1 个答案: