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

Javascript
javascript格式化日期时间函数
javascript新手语法小结
javascript基本语法分析说明
JS弹出居中的DIV的代码
js退出弹窗代码集合
很酷的javascript loading效果代码
css+js实现select列表横向排列效果代码
非常不错的弹出一个div的js代码
javascript 24点游戏代码
javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印
js innerHTML 的一些问题的解决方法
javascript 三组文字间隙滚动实例代码
JavaScript在IE和Firefox上的差异及相互替代的实现方法
asp批量修改记录的代码
js异或加解密效果代码
getElementByID、createElement、appendChild几个DHTML元素
js代码解密代码
JS解密入门之凭直觉解
JS解密入门 最终变量劫持
教你如何解密js/vbs/vbscript加密的编码异处理小结

Javascript 中的 Expandable "Detail" Table Rows


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