Expandable "Detail" Table Rows


Posted in Javascript onAugust 29, 2007

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
Javascript 相关文章推荐
js DOM模型操作
Dec 28 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
去除html代码里面的script正则方法
May 19 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 #Javascript
推荐一些非常不错的javascript学习资源站点
Aug 29 #Javascript
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 #Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 #Javascript
javascript动画效果类封装代码
Aug 28 #Javascript
Google韩国首页图标动画效果
Aug 26 #Javascript
javascript在一段文字中的光标处插入其他文字
Aug 26 #Javascript
You might like
php自动加载机制的深入分析
2013/06/08 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
js随机生成一个验证码
2017/06/01 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
JavaScript WeakMap使用详解
2021/02/05 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Python函数参数操作详解
2018/08/03 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python中url标签使用知识点总结
2020/01/16 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
怎么写好自荐信
2013/10/30 职场文书
优秀演讲稿范文
2013/12/29 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
python基础之类属性和实例属性
2021/10/24 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python