当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Expandable "Detail" Table Rows

Javascript
javascript 支持链式调用的异步调用框架Async.Operation
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
javascript dragable的Move对象
同一个表单 根据要求递交到不同页面的实现方法小结
Extjs ajax同步请求时post方式参数发送方式
实现连缀调用的map方法(prototype)
javascript Array.remove() 数组删除
asp(javascript)全角半角转换代码 dbc2sbc
jquery select(列表)的操作(取值/赋值)
JavaScript 乱码问题
js正确获取元素样式详解
JQuery 小练习(实例代码)
JavaScript 的方法重载效果
JavaScript 变量作用域及闭包
jQuery 解析xml文件
javascript 当前日期加(天、周、月、年)
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
上传图片时JS自动显示图片

Javascript 中的 Expandable "Detail" Table Rows


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 199 ::
收藏到网摘: n/a

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