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 相关文章推荐
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
js获取url传值的方法
Dec 18 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
解读ES6中class关键字
Nov 20 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 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 过滤器实现代码
2010/08/09 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
详解vue2.0模拟后台json数据
2019/05/16 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Python中的延迟绑定原理详解
2019/10/11 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
生日寿宴答谢词
2014/01/19 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
师范生求职信
2014/06/14 职场文书
校长新学期致辞
2015/07/30 职场文书
特种设备安全管理制度
2015/08/06 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
Python实现视频中添加音频工具详解
2021/12/06 Python
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技