展开/折叠带有嵌套行的表行

我想创建一个具有以下结构的表：
行 1 数据列 1 数据列 2 数据列 2
子行1 数据列1 数据列2 数据列2
子行2 数据列1 数据列2 数据列2
SubRow3 数据列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>

单击行时，我调用以下函数：

holdingsTree: function(that){
    var stack = '',
        classes = ba.splitClasses(that.attr('class')),
        nextRow = ba.getClassNumber(classes[1], "head");

    if (that.next().hasClass('head'+nextRow)){
        if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
            that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
        } else if (that.next().hasClass(classes[0])){
            stack = that.nextUntil('.head1');
            $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow))){ $(this).show().addClass('open').removeClass('closed'); } });
        }
    } else if (that.next().hasClass('head'+ (nextRow+1))){
        if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
            that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
        } else if (that.next().hasClass(classes[0])){
            stack = that.nextUntil('.head1');
            $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+1))){ $(this).show().addClass('open').removeClass('closed'); } });
        }
    } else if (that.next().hasClass('head'+ (nextRow+2))){
        if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
            that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
            return;
        } else if (that.next().hasClass(classes[0])){
            stack = that.nextUntil('.head'+ (nextRow+3));
            $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+2))){ $(this).show().addClass('open').removeClass('closed'); } });
            //stack.find('.head'+(nextRow+2)).show().addClass('open').removeClass('closed');
        }
    } else if (that.next().hasClass('head'+ (nextRow+3))){
        if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
            that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
        } else if (that.next().hasClass(classes[0])){
            stack = that.nextUntil('.head1');
            $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+3))){ $(this).show().addClass('open').removeClass('closed'); } });
        }
    } else if (that.next().hasClass('head'+ (nextRow+4))){
        if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
            that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
        } else if (that.next().hasClass(classes[0])){
            that.nextUntil('.head1').show().addClass('open').removeClass('closed');
        }
    } 

},

splitClasses: function(names){
    var names = names.split(' ');
    return names;
},

getClassNumber: function(name, pretext){
    var result = name.split(pretext);
    console.log(parseInt(result[1]) + 1);
    return parseInt(result[1]) + 1;
}

这很糟糕。我知道。 :)

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

就是这样：

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

})

检查这个小提琴以获取完整的运行代码http://jsfiddle.net/T8t2r/3/ http://jsfiddle.net/T8t2r/3/如果这解决了您的问题，请接受答案！

祝你好运！

编辑：要在更多级别上工作，一种方法是拥有级别属性。所以这是更新的版本，它应该适用于任意数量的级别。http://jsfiddle.net/T8t2r/9/ http://jsfiddle.net/T8t2r/9/

$(document).ready(function() {

    function getChildren($row) {
        var children = [], level = $row.attr('data-level');
        while($row.next().attr('data-level') > level) {
             children.push($row.next());
             $row = $row.next();
        }            
        return children;
    }        

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

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

})