admin 管理员组文章数量: 1086019
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
本文标签: javascriptCollapsing table rows with multiple tbody elementsStack Overflow
版权声明:本文标题:javascript - Collapsing table rows with multiple tbody elements - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.roclinux.cn/p/1744030235a2521361.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论