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實現(xiàn)列表自動滾動循環(huán)滾動展示新聞
jQuery實現(xiàn)列表自動滾動循環(huán)滾動展示新聞，鼠標懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動，實現(xiàn)的代碼如下，需要的朋友可以看看2014-08-08
JavaScript中利用jQuery綁定事件的幾種方式小結(jié)
這篇文章主要介紹了JavaScript中利用jQuery綁定事件的幾種方式小結(jié),包括不調(diào)用jQuery的"原生js"實現(xiàn)方式,需要的朋友可以參考下2016-03-03
jQuery通過ajax請求php遍歷json數(shù)組到table中的代碼(推薦)
這篇文章主要介紹了jQuery通過ajax請求php遍歷json數(shù)組到table中代碼(推薦)的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
經(jīng)常我們玩微信都會用到查到附近的人，都是在app上實現(xiàn)手機搖一搖的功能?，F(xiàn)在，我們將此技術(shù)搬移到手機web上，供大家學(xué)習(xí)，有需要的小伙伴可以參考下。2015-06-06
jquery select 設(shè)置默認選中的示例代碼
本篇文章主要是對jquery select 設(shè)置默認選中的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
下面小編就為大家?guī)硪黄猨query實時獲取時間的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
基于Jquery+Ajax+Json實現(xiàn)分頁顯示附效果圖
后臺action產(chǎn)生json數(shù)據(jù)，js獲取json數(shù)據(jù)分頁顯示，詳細的示例代碼如下，需要的朋友可以學(xué)習(xí)下2014-07-07
textarea的手動換行會產(chǎn)生換行標志，但這個標志存在卻看不到，存入數(shù)據(jù)庫中后讀出來顯示在頁面上卻不會換行，如何處理呢？2011-02-02
簡易驗證插件simpleValidate使用心得，基于JQuery，修改小BUG后能兼容各瀏覽器，附自用版本供下載2014-01-01