Expandable "Detail" Table Rows
摘要：AcommonUIistohaveatableofdatarows,whichwhenclickedonexpandtoshowadetai...
AcommonUIistohaveatableofdatarows,whichwhenclickedonexpandtoshowadetailedbreakdownof"child"rowsbelowthe"parent"row.
Theonlyrequirementsare:
Putaclassof"parent"oneachparentrow(tr)
Giveeachparentrow(tr)anid
Giveeachchildrowaclassof"child-ID"whereIDistheidoftheparenttrthatitbelongsto
ExampleCode
$(function(){
$('tr.parent')
.css("cursor","pointer")
.attr("title","Clicktoexpand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});ExampleTable(clickarow)
| 123 | Bill Gates | 100 | |
| 2007-01-02 | A short description | 15 | |
| 2007-02-03 | Another description | 45 | |
| 2007-03-04 | More Stuff | 40 | |
| 456 | Bill Brasky | 50 | |
| 2007-01-02 | A short description | 10 | |
| 2007-02-03 | Another description | 20 | |
| 2007-03-04 | More Stuff | 20 | |
| 789 | Phil Upspace | 75 | |
| 2007-01-02 | A short description | 33 | |
| 2007-02-03 | Another description | 22 | |
| 2007-03-04 | More Stuff | 20 | |
【Expandable "Detail" Table Rows】相关文章：
★ JavaScript实现单击下拉框选择直接跳转页面的方法
★ 安装使用Mongoose配合Node.js操作MongoDB的基础教程