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

Javascript
ext实现完整的登录代码
ext form 表单提交数据的方法小结
收藏,对比功能的JS部分实现代码
js可突破windows弹退效果代码
js获取div高度的代码
JS支持带x身份证号码验证函数
javascript的indexOf忽略大小写的方法
js活用事件触发对象动作
Javascript访问html页面的控件的方法详细分析
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
js仿淘宝的拼音检索特效代码
鼠标放上去触发一个javascript提示框效果代码
FF下zoom的替代方案 单位em
json编写简单一例
js取得2008奥运金牌排名
js常用函数2008-8-16整理
一些不错的js函数ajax
javascript:void(0)的真正含义实例分析
解决AJAX中跨域访问出现''没有权限''的错误
比较详细的XMLDOM对象方法详解

Javascript 中的 Expandable "Detail" Table Rows


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