javascript - 折叠具有多个 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> 上，但这是我想出的:

$(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> ，它会删除新的“详细信息”行，并显示原始行。