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 FIDDLE 链接

于 2013-04-09T05:58:22.460 回答