Expandable "Detail" Table Rows

2016-02-19 09:04 15 1 收藏

下面这个Expandable "Detail" Table Rows教程由图老师小编精心推荐选出，过程简单易学超容易上手，喜欢就要赶紧get起来哦！

【 tulaoshi.com - Web开发】

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)

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）IDNameTotal123Bill Gates100 2007-01-02A short description15 2007-02-03Another description45 2007-03-04More Stuff40456Bill Brasky50 2007-01-02A short description10 2007-02-03Another description20 2007-03-04More Stuff20789Phil Upspace75 2007-01-02A short description33 2007-02-03Another description22 2007-03-04More Stuff20

来源:http://www.tulaoshi.com/n/20160219/1589417.html

上一篇：不错的用外部Javascript修正特定网页内容
下一篇： iOS开发中UIImageView控件的常用操作整理

看过《Expandable "Detail" Table Rows》的人还看了以下文章更多>>

冬季喝茶3个"不要"

标签：养生健康

茶是中国老百姓非常喜爱的一种饮品，有的人甚至是一年四季以茶代水，茶不离口，甚至用茶来治病。专家提醒：茶水虽好，但冬季喝茶还有很多讲究。据专家介绍：冬天人的机体生理活动处于抑制状态，对于冬天的人们来说，养生之道在于御寒保暖，尤其是老年人到了冬季，抵抗力下降，手脚容易出现冰凉的现象，如果此时再喝上一杯绿茶，那只会更加重寒气...

我们为何"被丁克"了?

输卵管不孕的病因输卵管是女性生殖系统的主要组成部分之一，具有输送精子、卵子和受精卵以及提供精子贮存、获能、顶体反应和受精场所等生理功能。输卵管在解剖上分伞部、壶腹部、峡部和间质部，输卵管任何部位阻塞都可能引起输卵管功能障碍而导不孕。目前，输卵管性不孕是女性不孕症的重要原因，约占1／3以上。...

js技巧--转义符"\"的妙用

标签： Web开发

// blueDestiny, never-online // blueDestiny [at] 126.com 通常，我们在动态给定一个container的innerHTML时，通常是样做的： div id="divc" / SCRIPT LANGUAGE="JavaScript" var div = document.getElementById("divc"); var html = "" html +=&nbs...

Dreamweaver 基础：DW的"文档"窗口

标签： Web开发

"文档"窗口 "文档"窗口显示当前文档。可以选择下列任一视图: "设计"视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。 "代码"视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码(如...

阻击"光老化"预防提前衰老

标签：美容美容方法

许多著名皮肤科医生指出，由25岁开始，肌肤便会开始老化，骨胶原的自我制造力会显著减弱，令老化特征出现。但其实比起自然老化更杀害肌肤于无形的是紫外光的侵害，它会使暗哑、色斑、松弛、皱纹提早出现。“光老化”现今已成为女士们的头号敌人，想搞定日光，防晒美白一样也不能少。 “光老化”成因皮肤的暴露部位受到日光的影...

查看更多精彩>>