折叠和展开未嵌套的表行

问题描述：

我有一个表，其中的行似乎没有嵌套，但没有嵌套.我根本无法更改此布局，这是我必须使用的.

I have a table with rows that are not nested although they appear to be. I can't make changes to this layout at all, this is what I have to work with.

带有+的行折叠其下的行，而嵌套"行折叠其下的行，依此类推.我的解决方案在某种程度上有效.我遇到的问题是倒数第二个嵌套"行在其下面的每个折叠，包括它不应该折叠的行.我知道为什么，但是我不知道该怎么解决.

The rows with the + collapses the rows below them and the "nested" rows collapsed the rows below them etc. My solution works to some extent. The problem I'm having is that the second to last "nested" row collapses every below it, including the rows it shouldn't. I know why, I can't figure out how to solve it though.

看我在说什么的最好方法是和小提琴一起玩.您会明白我的意思的.

Best way to see what I'm talking about is by playing with the fiddle. You'll see what I mean.

http://jsfiddle.net/pc1sp8L6/

编辑

我必须能够重用此功能，因此必须保持其通用性.这就是为什么我不使用特定的类等的原因.

I have to be able to reuse this function so I have to keep it generic. That is why I'm not using specific classes etc.

HTML

<table>
        <tr class="parent-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="parent-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="parent-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="child-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="parent-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
    </table>

(function() {

var toggle = $('span.toggle');

toggle.on('click', function() {

    var $this = $(this);
    var objectClass = $this.parent().parent().attr('class');

    toggleRow($this, objectClass);

});

function toggleRow(element, elClass) {

    var classes = elClass.split(' ');
    var textList = '';
    for (var i = 0; i < classes.length; i++)
    {
        if (classes[i].length > 0)
        {
            textList += "."+classes[i];
        }
    }
    var $this = element.parents(textList);

    if(!$this.hasClass('collapsed')) {

        $this.addClass('collapsed').nextUntil('tr' + textList).hide();

    } else {

        $this.removeClass('collapsed').nextUntil('tr' + textList).show();

    }
}

}());

答

$('.parent-row').click(function(){
    var $element = $(this).next();
    while(!$element.hasClass('parent-row')){
        $element.toggle();
        if($element.next().length >0){
            $element = $element.next();   
        }
        else{
            return;
        }
    }
});

$('.child-row.has-children').click(function(){
    var $element = $(this).next();
    while($element.hasClass('child-child-row')){
        $element.toggle();
        if($element.next().length >0){
            $element = $element.next();   
        }
        else{
            return;
        }
    }
});

https://jsfiddle.net/pc1sp8L6/2/

或更通用的解决方案可能看起来像这样

Or a more generic solution might look like this

$('tr[class]').click(function(){
    var thisclass = $(this).attr("class");
    var $element = $(this).next();
    while(!$element.hasClass(thisclass)){
        $element.toggle();
        if($element.next().length >0){
            $element = $element.next();   
        }
        else{
            return;
        }
    }
});

https://jsfiddle.net/pc1sp8L6/3/

折叠和展开未嵌套的表行

相关推荐