Expandable "Detail" Table Rows
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 to
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-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
php 简单数据库导入程序[.sql文件]
一个对数据库进行操作的程序
jQuery Table Display
PHP动态网页程序优化及高效提速问题
Java中Hibernate单向(1-N)映射实例详解
js 页面右下角弹出提示框的代码分享
php 用户登录程序的实例教程
php 操作 Oracle数据代码
JavaScript动态操作表格(添加、删除行与列及单元格)的例子