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代码
Aug 22 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
DOM 高级编程
May 06 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 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
资料注册后发信小技巧
2006/10/09 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue实现计算器功能
2020/02/22 Javascript
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
行政前台岗位职责
2013/12/04 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
师德演讲稿范文
2014/05/06 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
springcloud整合seata
2022/05/20 Java/Android