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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
深入理解vue Render函数
Jul 19 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
jquery复选框全选/取消示例
2013/12/30 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
jQuery each和js forEach用法比较
2019/02/27 jQuery
小程序实现订单倒计时功能
2019/04/23 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
python根据unicode判断语言类型实例代码
2018/01/17 Python
python逆序打印各位数字的方法
2018/06/25 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
pytorch forward两个参数实例
2020/01/17 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
师范教师毕业鉴定
2014/01/13 职场文书
学生周末长期请假条
2014/02/15 职场文书
质量月活动策划方案
2014/03/10 职场文书
土木工程求职信
2014/05/29 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2016大学军训通讯稿
2015/11/25 职场文书