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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
Js图片点击切换轮播实现代码
Jul 27 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php中日期加减法运算实现代码
2011/12/08 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
csdn 批量接受好友邀请
2009/02/19 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
javascript几个易错点记录
2014/11/26 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
node跨域请求方法小结
2017/08/25 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python生成excel的实例代码
2017/11/08 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
公务员个人年终总结
2015/02/12 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
在Python 中将类对象序列化为JSON
2022/04/06 Python