-1

すべて展開/すべて折りたたむ機能をネストされたツリー テーブルに適用しようとしていますが、目的の出力が得られます。私はこの関連する質問を同じようにフォローしました。ここにフィドルがあります。

<a class="myexpand" href="#">Expand</a> | <a class="mycollapse" href="#">Collapse</a>
<table id="mytable">
    <thead>
        <th class="firstCol">Titulo</th>
        <th class="LastCol">Valor</th>
    </thead>
    <tr data-depth="0" class="collapse level0">
        <td><span class="toggle collapse"></span>Item 1</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td><span class="toggle"></span>Item 2</td>
        <td>123</td>
    </tr>
    <tr data-depth="2" class="collapse level2">
        <td><span class="toggle"></span>Item 3</td>
        <td>123</td>
    </tr>
    <tr data-depth="3" class="collapse level3">
        <td>Item x</td>
        <td>Letra</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td><span class="toggle"></span>Item 4</td>
        <td>123</td>
    </tr>
    <tr data-depth="2" class="collapse level2">
        <td>Item 4x</td>
        <td>123</td>
    </tr>
    <tr data-depth="0" class="collapse collapsable level0">
        <td><span class="toggle collapse"></span>Item 5</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse collapsable level1">
        <td>Item 6</td>
        <td>123</td>
    </tr>
</table>

脚本

$(function() {
    $('#mytable').on('click', '.toggle', function () {
        //Gets all <tr>'s  of greater depth
        //below element in the table
        var findChildren = function (tr) {
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var el = $(this);
        var tr = el.closest('tr'); //Get <tr> parent of toggle button
        var children = findChildren(tr);

        //Remove already collapsed nodes from children so that we don't
        //make them visible. 
        //(Confused? Remove this code and close Item 2, close Item 1 
        //then open Item 1 again, then you will understand)
        var subnodes = children.filter('.expand');
        subnodes.each(function () {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });

        //Change icon and hide/show children
        if (tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    });
   $('.toggle').trigger('click');

   $(".myexpand").click(function () {
            $("#mytable tr").show("slow");
   });
    $(".mycollapse").click(function () {
            $("#mytable tr").hide("fast");
   });


});

問題は、Expand all tr​​ expands をクリックしたときですが、画像が展開されず、Collapse whole table gets hidden をクリックしたときです。

効率的な方法でこれを行う方法を教えてください。

前もって感謝します。

4

1 に答える 1

1

以下のように使用してください....広告内にtrタグがありません

<thead>
        <tr>
            <th class="firstCol">Titulo</th>
            <th class="LastCol">Valor</th>
        </tr>
    </thead>

あなたの関数を私の関数に置き換えます

 $(".mycollapse").click(function () {
            $("#mytable tr").hide("fast");
            $("#mytable thead tr").show("fast");
            $("#mytable tr.level0").show("fast");
        });
于 2013-11-06T08:14:51.340 に答える