使用嵌套行展开/折叠表格行 [英] Expand/Collapse table rows with nested rows

查看：135
本文介绍了使用嵌套行展开/折叠表格行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个具有以下结构的表：

Row1 datacolumn1 datacolumn2 datacolumn2

SubRow1 datacolumn1 datacolumn2 datacolumn2

SubRow2 datacolumn1 datacolumn2 datacolumn2

SubRow3 datacolumn1 datacolumn2 datacolumn2


我希望子路径在点击时展开/折叠。我似乎不能使它与表格一起工作。我知道列表将是更好的选择，但表格更容易维护。 

 < tbody> 
< tr class =row1 head1> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
< tr class =row1 head2 closed> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
< tr class =row1 head3> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
< tr class =row1 head4> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
< tr class =row1 head5> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
< tr class =row2 head1> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
 
< tr class =row2 head4> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
< tr class =row2 head5> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
< tr> 
< td>现金和等价物< / td> 
< td> 000,000< / td> 
< td> 000,000< / td> 
 
< / tr> 
< tr> 
< td>现金和等价物< / 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）; （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（'打开'）。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（'打开'）。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（'打开'）。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（ '关闭'）; 
 
 
 
 
 splitClass：function（names）{
 var names = names.split（''）; 
返回姓名; 
}，
 
 getClassNumber：function（name，pretext）{
 var result = name.split（pretext）; 
 console.log（parseInt（result [1]）+ 1）; 
 return parseInt（result [1]）+ 1; 
}

IT非常糟糕。我知道。 ：）

解决方案

您可以为您称为父母的行添加一个类，为您称为孩子的行添加一个类，以及切换显示。



以下是操作方法： 

  $（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/9/ 

  $（document）.ready（function（）{
 
 function getChildren（$ row）{
 var children = []， level = $ row.attr（'data-level'）; 
 while（$ row.next（）。attr（'data-level'）>等级）{
 children.push（$ row .next（））; 
 $ row = $ row.next（）; 
} 
 return children; 
} 
 
 $（'。parent '）.on（'click'，function（）{
 
 var children = getChildren（$（this））; 
 $ .each（children，function（）{
 $（this）.toggle（）; 
}）
}）; 
 
}）


I want to create a table with the following structure:
Row1 datacolumn1 datacolumn2 datacolumn2
SubRow1 datacolumn1 datacolumn2 datacolumn2
SubRow2 datacolumn1 datacolumn2 datacolumn2
SubRow3 datacolumn1 datacolumn2 datacolumn2

I want to the subrows to expand/collapse on click. I just cant seem to make it work with tables. I know lists would be a better option but tables are much easier to maintain. 

<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>

on row click, i call the following function: 

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;
}

ITs very bad. I know. :)

解决方案

You can have a class for the rows you call parents, and a class for the rows you call children, and toggle their display.

Here's how:

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

})

Check this fiddle for the complete running code http://jsfiddle.net/T8t2r/3/ And please accept the answer if this solves your problem!

Good luck!

EDIT: to work on more levels one way is to have a level attribute. So here is the updated version which should work on any number of levels. 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();
        })
    });

})

这篇关于使用嵌套行展开/折叠表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆