Expandable & quot; Detail & quot; TableRows A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row.
The only requirements are:
Put a class of "parent" on each parent row (tr)
Give each parent row (tr) an id
Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs
Example Code
$ (Function (){
$ ('Tr. parent ')
. Css ("cursor", "pointer ")
. Attr ("title", "Click to expand/collapse ")
. Click (function (){
$ (This). siblings ('. child-' + this. id). toggle ();
});
$ ('Tr [@ class ^ = child-] '). hide (). children ('td ');
}); Example Table (click a row)
| ID |
Name |
Total |
| 123 |
Bill Gates |
100 |
| |
2007-01-02 |
A short description |
15 |
| |
2007-02-03 |
Another description |
45 |
| |
2007-04 4 |
More Stuff |
40 |
| 456 |
Bill Brasky |
50 |
| |
2007-01-02 |
A short description |
10 |
| |
2007-02-03 |
Another description |
20 |
| |
2007-04 4 |
More Stuff |
20 |
| 789 |
Phil Upspace |
75 |
| |
2007-01-02 |
A short description |
33 |
| |
2007-02-03 |
Another description |
22 |
| |
2007-04 4 |
More Stuff |
20 |
