1
pimps
spam pimp it un-pimp it
Tuesday, September 29, 2009 8:41:17 PM GMT

Expand table rows with jQuery - jExpand plugin
Expand table rows with jQuery - jExpand plugin
 
www.jankoatwarpspeed.com -- jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements. Download jExpand with samples View demo How does it work? To have such expandable table we have to reserve two rows for each entity, one that will be master row and another that will show details. Details rows are toggled by clicking on master row. Master row can contain as many columns as it is needed. The important thing is that details row have to span (using colspan attribute) all the columns that master row contains (if you want to have full details row area, of course). In the example below, table contains 4 columns and details rows spans exactly 4 columns.              Lorem ipsum         Lorem ipsum         Lorem ipsum         Lorem ipsum                   Lorem ipsum         Lorem ipsum         Lorem ipsum         Lorem ipsum                                                            Lorem ipsum         Lorem ipsum         Lorem ipsum         Lorem ipsum                                               The code that turns this into expandable table is quite simple. First, it will add .master class to each odd row in the table and hide all rows that don't have .master class (those are details rows). It will then "unhide" table header that is first in the array of table rows. The second step is to add click handler to all rows that have .master class. By clicking on any master row, jQuery will toggle the visibility of related details row. Couldn't be simpler, I think. $("#report tr:odd").addClass("master"); $("#report tr:not(.master)").hide(); $("#report tr:first-child").show(); $("#report tr.master").click(function(){     $(this).next("tr").toggle();     $(this).find(".arrow").toggleClass("up"); }); There is one more line of code here which adds "odd" CSS class to each odd table row. The code is fully functional
beebee posted 170 days, 18 hours, 5 minutes ago     show counter code
tags: Tutorials

No comments yet, be the first one to post comment.

To post your comment please login or signup