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 读取和设置文档元素的样式属性
Apr 14 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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加密解密的代码
2006/10/09 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
js实现时间日期校验
2020/05/26 Javascript
wxPython学习之主框架实例
2014/09/28 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
医院门卫岗位职责
2013/12/30 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
SQL Server使用导出向导功能
2022/04/08 SQL Server