Expandable「Detail」Table Rows
1250 ワード
A common UI。 is ト すばらしい a. テーブル 保存先 ダタ ローソン、 which when clicked オン expand ト ショー a. detailed breakdown 保存先 "ちどり ローソン below the "parent" row.The only requirements エリア: Put a. クラス 保存先 "parent" オン each parent row (tr) Give each parent row (tr) an id。 Give each ちどり row a. クラス 保存先 "child-ID" where ID is the id。 保存先 the parent tr that it belongs ト Example コード$(function() { $('tr.parent) .css(「cursor」「pointer」) .atr(「title」「Click」 ト expand/collappse") .click(function){ $(this).siblings('.child-'+this.id).toggle() }); $('tr[@class^=child-]].hide().children('td'));Example テーブル (click a. row)
ID
Name
Total
123
Bill Gates
100
2007-01-02
A shot description
15
2007-02-03
Another description
45
2007-03-04
More Stuff
40
456
ビルBrasky
50
2007-01-02
A shot description
10
2007-02-03
Another description
20
2007-03-04
More Stuff
20
789
Phil Upspace
75
2007-01-02
A shot description
33
2007-02-03
Another description
22
2007-03-04
More Stuff
20
ID
Name
Total
123
Bill Gates
100
2007-01-02
A shot description
15
2007-02-03
Another description
45
2007-03-04
More Stuff
40
456
ビルBrasky
50
2007-01-02
A shot description
10
2007-02-03
Another description
20
2007-03-04
More Stuff
20
789
Phil Upspace
75
2007-01-02
A shot description
33
2007-02-03
Another description
22
2007-03-04
More Stuff
20