Expandable "Detail" Table Rows
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 |
相關(guān)文章
javascript開發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
用onpropertychange,oninput事件解決onchange事件的不足,需要的朋友可以參考下。2010-11-11jquery實現(xiàn)簡單的輪換出現(xiàn)效果實例
這篇文章主要介紹了jquery實現(xiàn)簡單的輪換出現(xiàn)效果,涉及jquery針對圖片樣式切換效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07jquery validate.js表單驗證入門實例(附源碼)
這篇文章主要介紹了jquery validate.js表單驗證入門實例,為大家提供了jquery validate.js表單驗證的源碼,特別適合初學者學習validate.js表單驗證,感興趣的小伙伴們可以參考一下2015-11-11jQuery插件jQuery-JSONP開發(fā)ajax調(diào)用使用注意事項
jQuery-JSONP是一個支持 JSONP 調(diào)用的 jQuery 插件,使用它是因為它支持出錯時的 ajax 回調(diào),而 jQuery 的 $.ajax 不支持,我們已經(jīng)在實際項目中使用,在開始使用時遇到了2個問題,在這里記錄并分享一下。2013-11-11為jQuery-easyui的tab組件添加右鍵菜單功能的簡單實例
下面小編就為大家?guī)硪黄獮閖Query-easyui的tab組件添加右鍵菜單功能的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10