2

次のようなテーブルがあります。

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
    ....
    .... 10s of records like this
</table>

各 tbody 要素をクリック可能 (折りたたみ可能) にして、折りたたまれた状態で内部の概要 (たとえば、Customer 1 | 3 Entries) を取得し、展開された状態で実際の行を表示できるようにします。

上記のような構造の表に対して、これを行うことはできますか?

JSFiddle はこちら: http://jsfiddle.net/Ju4xH/

4

2 に答える 2

5

少し乱雑で、アニメーションが機能しません ( <tr>s にあるためだと推測していますが、私が思いついたのは次のとおりです。

$(document).ready(function () {
    $("table").on("click", "tbody", function () {
        var $this = $(this);
        var myTRs = $this.children("tr");

        if ($this.hasClass("collapsed")) {
            $this.removeClass("collapsed");
            myTRs.first().remove();            
            myTRs.show();
        } else {
            $this.addClass("collapsed");
            var newInfo = myTRs.first().children("td").first().text() + " | " + myTRs.length + " entries";
            myTRs.hide();
            $this.prepend($("<tr><td colspan='3'>" + newInfo + "</td></tr>").hide()).find("tr").first().slideDown();
        }
    });
});

デモ: http://jsfiddle.net/ZhqAf/1/

折りたたま<tbody>れていない をクリックすると、行が非表示になり、必要な詳細が新しい行に追加されます。折りたたま<tbody>れた をクリックすると、新しい「詳細」行が削除され、元の行が表示されます。

于 2013-04-09T05:10:36.047 に答える
2

その行の数を数えて各行のヘッダーを含めました。tbody挿入後、各ヘッダーのクリックイベントをバインドして、その内容を表示しtbodyます。

$(document).ready(function(){
    $('table tbody').each(function(){
        var num=$(this).children().length;
       // alert(num);
       $(this).before("<div id='header' class='header'>"+num +" entries </div>");
        //alert($(this).html());
        $(this).hide();
    });
    $('.header').on('click',function(){
       $(this).next().slideToggle("slow");
    });
});

JSフィドルリンク

編集済み

本当にスライド アニメーションが必要な場合は、すべてtbodyを div でラップすることもできます。slideToggel アニメーションも提供します。これは次のように使用できます。

$(document).ready(function(){
    $('table tbody').each(function(){
        var num=$(this).children().length;
       // alert(num);
       $(this).before("<div id='header' class='header'>"+num +" entries </div>");
        //alert($(this).html());
        $(this).wrap('<div class="new" />');
        $('.new').hide();
    });
    $('.header').on('click',function(){

       $(this).next().slideToggle("slow");
        $(this)
    });
});

編集部分のJSフィドルリンク

于 2013-04-09T05:58:22.460 に答える