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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
出现“不能执行已释放的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
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
javascript中Object使用详解
2015/01/26 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
中学教师培训制度
2014/01/31 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
纪录片信仰观后感
2015/06/08 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
党员干部学习心得体会
2016/01/23 职场文书
Node.js实现断点续传
2021/06/23 Javascript