javascript - ネストされた行を含む表の行を展開/折りたたむ

Question

次の構造のテーブルを作成したい:
Row1 datacolumn1 datacolumn2 datacolumn2 SubRow1 datacolumn1 datacolumn2
datacolumn2 SubRow2 datacolumn1 datacolumn2
datacolumn2 SubRow3
datacolumn1 datacolumn2 datacolumn2

クリックでサブ行を展開/折りたたむようにしたい。テーブルで機能させることができないようです。リストの方がより良いオプションであることはわかっていますが、テーブルの方が保守がはるかに簡単です。

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

非常に悪いです。知っている。:)

score 9 · Accepted Answer

親と呼ぶ行のクラスと、子と呼ぶ行のクラスを作成し、それらの表示を切り替えることができます。

方法は次のとおりです。

$(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/ そして、これで問題が解決する場合は、回答を受け入れてください!

幸運を！

編集: より多くのレベルで作業するには、レベル属性を使用するのが 1 つの方法です。したがって、これが更新されたバージョンで、任意の数のレベルで機能するはずです。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();
        })
    });

})

score 0 · Accepted Answer

その例から何をしようとしているのかを理解するのは難しいです。

あなたがやろうとしていることはかなり単純なはずです - 私がすることは、次の概念を使用してゼロから書き直すことです:

クリック可能な各項目 (行) に独自の ID を与えますが、それらすべてを 1 つの「クリック可能な」クラスにします。
各サブ行に、クリック可能な親の ID に基づいたクラスを指定します (「[id]-sub」など)。
クリックされた項目 ID を決定する「クリック可能」クラスでクリックイベントを設定し、それを使用して、クラス「[クリックされた ID]-sub」を持つすべての行を切り替えます (非表示/表示)。

そのようにすると、コードが大幅に減り、読みやすくなります。

お役に立てれば...

score 0 · Accepted Answer

あなたはこれを行うことができます：

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

HTML:

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

CSS:

.sub{display: none;}

フィドル

score -1 · Accepted Answer

すでに jQuery を使用しているので、プラグインdatatalesを使用できます。

ページの例のセクションでわかるように、コードで達成しようとしていることがまさにそこにあります。

javascript - ネストされた行を含む表の行を展開/折りたたむ

4 に答える 4

Related

Reference