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的实现简单的表格中增加或删除下一行
Aug 01 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
JS验证字符串功能
Feb 22 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
js实现弹幕墙效果
Dec 10 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
汉语专业应届生求职信
2013/10/01 职场文书
实习评语
2013/12/16 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
幼儿园开学寄语
2014/04/03 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
商务司机岗位职责
2015/04/10 职场文书
消防安全主题班会
2015/08/12 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python