亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery實(shí)現(xiàn)表格展開與折疊的方法

 更新時(shí)間:2015年05月04日 15:16:56   投稿:shichen2014  
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)表格展開與折疊的方法。分享給大家供大家參考。具體分析如下:

這是很人性化的一款特效代碼,實(shí)現(xiàn)點(diǎn)擊其中一個(gè)父級,另一個(gè)之前打開的父級會自動關(guān)閉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery表格展開折疊,默認(rèn)折疊</title>
<style>
table{ border:0;border-collapse:collapse;}
td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th{ font:bold 12px/17px Arial;text-align:left;
padding:4px;border-bottom:1px solid #333;
width:100px;
}
.parent { background:#FFF38F;cursor:pointer;} /* 偶數(shù)行樣式*/
.odd{ background:#FFFFEE;} /* 奇數(shù)行樣式*/
.selected{ background:#FF6500;color:#fff;}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
 $(".parent").click(function(){
 $(this).toggleClass("selected");
 $(this).siblings().not(".parent").not(":first-child").hide();
 $(this).next().show().next().show();
 });
})
</script>
</head>
<body>
<table>
<tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
<tr class="parent" id="row_01">
<td>張山</td><td>男</td><td>浙江寧波</td></tr>
<tr class="child_row_01"><td>張山</td><td>男</td><td>浙江寧波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前臺開發(fā)組</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南長沙</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td><td>浙江溫州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后臺開發(fā)組</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</table>
</body>
</html>

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 20個(gè)非常棒的 jQuery 幻燈片插件和教程分享

    20個(gè)非常棒的 jQuery 幻燈片插件和教程分享

    jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架,使用簡單靈活,同時(shí)還有許多成熟的插件可供選擇,它可以幫助你在項(xiàng)目中加入一些非常好的效果。
    2011-08-08
  • JQuery實(shí)現(xiàn)電梯導(dǎo)航效果

    JQuery實(shí)現(xiàn)電梯導(dǎo)航效果

    這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)電梯導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • jquery div 居中技巧應(yīng)用介紹

    jquery div 居中技巧應(yīng)用介紹

    在項(xiàng)目實(shí)戰(zhàn)中碰到了一些問題,例如,jquery如何使div居中,此問題一直困擾著我,因此尋找了一些方法,曬出來和大家分享一下
    2012-11-11
  • jQuery基礎(chǔ)語法實(shí)例入門

    jQuery基礎(chǔ)語法實(shí)例入門

    這篇文章主要介紹了jQuery基礎(chǔ)語法,以實(shí)例形式分析了jQuery的對象以及針對對象進(jìn)行的操作用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向

    JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向

    本文主要分享了基于JQuery的獲取鼠標(biāo)進(jìn)入和離開容器方向的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值。下面跟著小編一起來看下吧
    2016-12-12
  • jQuery  ready方法實(shí)現(xiàn)原理詳解

    jQuery ready方法實(shí)現(xiàn)原理詳解

    這篇文章主要介紹了jQuery ready方法實(shí)現(xiàn)原理詳解的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • jQuery選擇器的工作原理和優(yōu)化分析

    jQuery選擇器的工作原理和優(yōu)化分析

    至于有那些選擇器,在幫助手冊中都有,自己去看,這篇主要是分析他的工作原理,而優(yōu)化我們寫 的選擇器,尤其在頁面內(nèi)容很多的情況下,更應(yīng)該需要優(yōu)化。下邊就言歸正傳。
    2011-07-07
  • jQuery源碼分析-01總體架構(gòu)分析

    jQuery源碼分析-01總體架構(gòu)分析

    從上邊的注釋看,jQuery的源碼結(jié)構(gòu)相當(dāng)清晰、條理,不像代碼那般晦澀和讓人糾結(jié)
    2011-11-11
  • 基于jQuery實(shí)現(xiàn)可編輯的表格

    基于jQuery實(shí)現(xiàn)可編輯的表格

    這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)可編輯的表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實(shí)例分析

    jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實(shí)例分析

    這篇文章主要介紹了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法,結(jié)合實(shí)例形式分析了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下
    2019-02-02

最新評論