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

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

Javascript 中的 Expandable "Detail" Table Rows


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 192 ::
收藏到网摘: 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