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 AjaxQueue改进步骤
Oct 06 Javascript
javascript 快速排序函数代码
May 30 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
vue 实现购物车总价计算
Nov 06 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
JS delegate与live浅析
2013/12/21 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
使用K.function()调试keras操作
2020/06/17 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
程序员求职信
2014/04/16 职场文书
二审答辩状格式
2015/05/22 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书