I have a table that looks like this:

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

I want to make each tbody element clickable (collapsible) so that in a collapsed state, I would get a summary of what is inside (say, Customer 1 | 3 Entries) and in an expanded state, I would get to see the actual rows.

Can this be done for the table structured as shown above?

JSFiddle here: /

I have a table that looks like this:

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

I want to make each tbody element clickable (collapsible) so that in a collapsed state, I would get a summary of what is inside (say, Customer 1 | 3 Entries) and in an expanded state, I would get to see the actual rows.

Can this be done for the table structured as shown above?

JSFiddle here: http://jsfiddle/Ju4xH/

• javascript
• jquery
• html
• html-table

Share Improve this question Follow edited Dec 1, 2016 at 14:57 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 9, 2013 at 4:56 LegendLegend 117k123123 gold badges284284 silver badges406406 bronze badges 4

• Customer 1 | 3 Entries I didnt get this ? will you please make it more clear .. I understand you need each tbody colapsable and when click on that header expand that tbody . – rahularyansharma Commented Apr 9, 2013 at 5:09
• @rahularyansharma: That's just an example that in the collapsed state, the collapsed row shows the total number of internal rows. For instance, in my table, for Customer 1 there are three internal rows. – Legend Commented Apr 9, 2013 at 5:13
• It is more user friendly to have the summary row static and always displayed with a button to collapse or expand the detail rows. Clicking anywhere to collapse the tbody is an unexpected behaviour. – RobG Commented Apr 9, 2013 at 5:41
• may be you don't find my answer slideToggle("slow") smooth just because Table Rows don't seem to slide. stackoverflow./questions/9931057/… – rahularyansharma Commented Apr 9, 2013 at 6:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

It's a little messy and the animations don't work (I'm guessing it's because it's on the <tr>s, but here's what I came up with:

$(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/ZhqAf/1/

When you click a non-collapsed <tbody>, it will hide the rows and prepend a new one with the details you wanted. When you click a collapsed <tbody>, it removes the new "details" row, and shows the original rows.

I have included header for each row by counting the number of rows in that tbody and after insert bind the click event on each header to show content of that 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

if you really want slide animation you can wrap all tbody also in a div . so slideToggel will give you animation also. You can use this as follows :

$(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