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)文章
jquery選擇器排除某個(gè)DOM元素的方法(實(shí)例演示)
這篇文章主要介紹了jquery選擇器排除某個(gè)DOM元素的方法,也就是在選中的一些元素中,過(guò)濾一些不需要的,使用jquery not選擇器實(shí)現(xiàn),需要的朋友可以參考下2014-04-04javascript開(kāi)發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
用onpropertychange,oninput事件解決onchange事件的不足,需要的朋友可以參考下。2010-11-11jquery點(diǎn)擊實(shí)現(xiàn)升序降序圖標(biāo)切換
這篇文章主要為大家詳細(xì)介紹了jquery點(diǎn)擊實(shí)現(xiàn)升序降序圖標(biāo)切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果,涉及jquery針對(duì)圖片樣式切換效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07jquery validate.js表單驗(yàn)證入門(mén)實(shí)例(附源碼)
這篇文章主要介紹了jquery validate.js表單驗(yàn)證入門(mén)實(shí)例,為大家提供了jquery validate.js表單驗(yàn)證的源碼,特別適合初學(xué)者學(xué)習(xí)validate.js表單驗(yàn)證,感興趣的小伙伴們可以參考一下2015-11-11使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10解決IE9下JQuery發(fā)送ajax請(qǐng)求失效的方法
這篇文章介紹了解決IE9下JQuery發(fā)送ajax請(qǐng)求失效的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06jQuery插件jQuery-JSONP開(kāi)發(fā)ajax調(diào)用使用注意事項(xiàng)
jQuery-JSONP是一個(gè)支持 JSONP 調(diào)用的 jQuery 插件,使用它是因?yàn)樗С殖鲥e(cuò)時(shí)的 ajax 回調(diào),而 jQuery 的 $.ajax 不支持,我們已經(jīng)在實(shí)際項(xiàng)目中使用,在開(kāi)始使用時(shí)遇到了2個(gè)問(wèn)題,在這里記錄并分享一下。2013-11-11為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10