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

Javascript
js 创建一个浮动div的代码
javascript下利用数组缓存正则表达式的实现方法
javascript 最常用的10个自定义函数[推荐]
jQuery 常见开发使用技巧总结
十分钟打造AutoComplete自动完成效果代码
JavaScript 入门基础知识 想学习js的朋友可以参考下
javascript 清空form表单中某种元素的值
javascript 格式化时间日期函数代码脚本之家修正版
javascript dom操作之cloneNode文本节点克隆使用技巧
jQuery 动态酷效果实现总结
jQuery中的常用事件总结
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
javascript+css 网页每次加载不同样式的实现方法
向大师们学习Javascript(视频与PPT)
js 实现无干扰阴影效果 简单好用(附文件下载)
JavaScript 拾漏补遗
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
jQuery的强大选择器小结
jquery $(document).ready() 与window.onload的区别
javascript 动态调整图片尺寸实现代码

Javascript 中的 Expandable "Detail" Table Rows


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