Javascript 使用嵌套行展开/折叠表行

我想创建一个具有以下结构的表：
行1数据列1数据列2数据列2
子程序W1数据列1数据列2数据列2
子程序W2数据列1数据列2数据列2
子程序W3数据列1数据列2数据列2

我想在单击时打开/折叠子视图。我就是不能让它和桌子一起工作。我知道列表是一个更好的选择，但是表格更容易维护

<tbody>
    <tr class="row1 head1">
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>
    <tr class="row1 head2 closed">
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>
    <tr class="row1 head3">
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>
    <tr class="row1 head4">
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>
    <tr class="row1 head5">
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>
    <tr class="row2 head1">
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>

    <tr class="row2 head4">
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>
    <tr class="row2 head5">
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>
    <tr>
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>
    <tr>
        <td>Cash and Equivalents</td>
        <td>000,000</td>
        <td>000,000</td>

    </tr>

</tbody>

---

非常糟糕。我知道。：）

因为您已经在使用jQuery，所以可以使用该插件

---

正如您在页面的示例部分所看到的，这正是您试图用代码实现的目标。

由于您已经在使用jQuery，因此可以使用该插件

---

正如您在本页的示例部分中所看到的，这正是您试图用代码实现的目标。

很难从该示例中看出您想要做什么

您要做的应该相当简单-我要做的是使用以下概念从头重写：

为每个可点击的项目（行）指定自己的ID，但将它们全部放在一个“可点击”类中

根据可单击父项的ID为每个子行指定一个类，例如“[ID]-sub”

在“clickable”类上设置一个click事件，确定单击的项目ID，并使用该事件切换（隐藏/显示）类为“[clicked ID]-sub”的所有行

这样做，您应该拥有更少的代码，并且应该更具可读性

---

希望这有帮助…

很难从这个例子中看出你想做什么

您要做的应该相当简单-我要做的是使用以下概念从头重写：

为每个可点击的项目（行）指定自己的ID，但将它们全部放在一个“可点击”类中

根据可单击父项的ID为每个子行指定一个类，例如“[ID]-sub”

在“clickable”类上设置一个click事件，确定单击的项目ID，并使用该事件切换（隐藏/显示）类为“[clicked ID]-sub”的所有行

这样做，您应该拥有更少的代码，并且应该更具可读性

---

希望这有帮助…

您可以为您称为父行的行创建一个类，为您称为子行的行创建一个类，并切换它们的显示

以下是方法：

$(document).ready(function() {

    function getChildren($row) {
        var children = [];
        while($row.next().hasClass('child')) {
             children.push($row.next());
             $row = $row.next();
        }            
        return children;
    }        

    $('.parent').on('click', function() {

        var children = getChildren($(this));
        $.each(children, function() {
            $(this).toggle();
        })
    });

})

检查此小提琴，查看完整的运行代码 如果这解决了你的问题，请接受答案

祝你好运

编辑：要在多个级别上工作，一种方法是使用级别属性。因此，这里是更新的版本，它可以在任何级别上工作

---

您可以为您称为父行的行创建一个类，为您称为子行的行创建一个类，并切换其显示

以下是方法：

$(document).ready(function() {

    function getChildren($row) {
        var children = [];
        while($row.next().hasClass('child')) {
             children.push($row.next());
             $row = $row.next();
        }            
        return children;
    }        

    $('.parent').on('click', function() {

        var children = getChildren($(this));
        $.each(children, function() {
            $(this).toggle();
        })
    });

})

检查此小提琴，查看完整的运行代码 如果这解决了你的问题，请接受答案

祝你好运

编辑：要在多个级别上工作，一种方法是使用级别属性。因此，这里是更新的版本，它可以在任何级别上工作

您可以这样做：

$('.mySelectorOfNOTSubRow').toggle(
    function(){
        $(this).nextUntil('.mySelectorOfNOTSubRow').show();
    }, function(){
        $(this).nextUntil('.mySelectorOfNOTSubRow').hide();
});

HTML:

您可以这样做：

$('.mySelectorOfNOTSubRow').toggle(
    function(){
        $(this).nextUntil('.mySelectorOfNOTSubRow').show();
    }, function(){
        $(this).nextUntil('.mySelectorOfNOTSubRow').hide();
});

HTML:

---

啊，DKSan建议使用DataTables-实际上我也使用了DataTables Details行来实现这类功能，但除非您出于其他目的需要其他DataTables，否则我个人建议您避免使用它-让Details行按您希望的方式工作可能会非常痛苦。啊，DKSan建议使用DataTables—实际上我也使用DataTables Details行来实现这类功能，但除非您出于其他目的需要其余的DataTables，否则我个人建议避免使用它—让Details行按照您希望的方式工作可能会很痛苦。您可以使用fadeToggle（）或slideToggle（）来代替切换对于不同的效果。只考虑一个嵌套级别。我要处理多个嵌套级别。谢谢你的帮助。但它仍然有漏洞。折叠所有子行，然后尝试折叠最上面的父行，它只折叠下一个（）子行。检查此项：这些是草稿，它只是为您指出了正确的方向，您应该尝试使用它并改进解决方案。@Angel将第16行更改为

$（此）。slideToggle（500）似乎不起作用？您可以使用fadeToggle（）或slideToggle（）来实现不同的效果，而不是切换。只处理一个嵌套级别。我要处理多个嵌套级别。谢谢你的帮助。但它仍然有漏洞。折叠所有子行，然后尝试折叠最上面的父行，它只折叠下一个（）子行。检查此项：这些是草稿，它只是为您指出了正确的方向，您应该尝试使用它并改进解决方案。@Angel将第16行更改为
$（此）。slideToggle（500）似乎不起作用？这只考虑一个嵌套级别。我必须处理多达5个级别的嵌套。这只处理单个级别的嵌套。我必须照顾多达5个层次的筑巢。
<table>
<tbody>
<tr class="head"><td></td></tr>
     <tr class="sub"><td></td></tr>
     <tr class="sub"><td></td></tr>
     <tr class="sub"><td></td></tr>
<tr class="head"><td></td></tr>
     <tr class="sub"><td></td></tr>
     <tr class="sub"><td></td></tr>
     <tr class="sub"><td></td></tr>
<tr class="head"><td></td></tr>
     <tr class="sub"><td></td></tr>
     <tr class="sub"><td></td></tr>
     <tr class="sub"><td></td></tr>
...
</tbody>
</table>

.sub{display: none;}