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/
Share Improve this question edited Dec 1, 2016 at 14:57 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Apr 9, 2013 at 4:56 LegendLegend 117k123 gold badges284 silver badges406 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
2 Answers
Reset to default 5It'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