折叠具有多个tbody元素的表行

Question

我有一个看起来像这样的表:

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

Answer 1

这有点乱,动画不起作用(我猜它是因为它在<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>,它将删除新的"详细信息"行,并显示原始行.