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中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
Bootstrap实现模态框效果
Sep 30 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 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读取IMAP邮件
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
Python 高级专用类方法的实例详解
2017/09/11 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
Python字符串三种格式化输出
2020/09/17 Python
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
促销活动总结范文
2014/04/30 职场文书
房地产广告策划方案
2014/05/15 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
学校消防安全责任书
2014/07/23 职场文书
从事会计工作年限证明
2015/06/23 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
React自定义hook的方法
2022/06/25 Javascript