多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(); 
     } 
    }); 
}); 

DEMO：http://jsfiddle.net/ZhqAf/1/

當你點擊一個未塌縮<tbody>，它會隱藏行和前面加上一個新的你想要的細節編輯。當您單擊摺疊的<tbody>時，它將刪除新的「詳細信息」行，並顯示原始行。

Answer 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 FIDDLE LINK

EDITED

如果你真的想要幻燈片動畫你可以用所有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 LINK FOR EDITED PART