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 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
jquery tab标签页的制作
May 10 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
如何实现js拖拽效果及原理解析
May 08 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+MySQL的聊天室设计
2006/10/09 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
Python的subprocess模块总结
2014/11/07 Python
对numpy中shape的深入理解
2018/06/15 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
Hotels.com中国区:好订网
2016/08/18 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
安全生产检讨书
2014/01/21 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
尊师重教主题班会
2015/08/14 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis