jQuery實現(xiàn)表格展開與折疊的方法
更新時間：2015年05月04日 15:16:56 投稿：shichen2014
這篇文章主要介紹了jQuery實現(xiàn)表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)表格展開與折疊的方法。分享給大家供大家參考。具體分析如下：
這是很人性化的一款特效代碼，實現(xiàn)點擊其中一個父級，另一個之前打開的父級會自動關(guān)閉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery表格展開折疊，默認折疊</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è)計有所幫助。
您可能感興趣的文章:
- jQuery實現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果示例【測試可用】
- jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)
- 基于jQuery實現(xiàn)下拉收縮(展開與折疊)特效
- jQuery實現(xiàn)DIV層收縮展開的方法
- jquery實現(xiàn)可點擊伸縮與展開的菜單效果代碼
- jquery實現(xiàn)點擊查看更多內(nèi)容控制段落文字展開折疊效果
- jQuery實現(xiàn)文本展開收縮特效
- jquery實現(xiàn)先淡出再折疊收起的動畫效果
- jQuery使用slideUp方法實現(xiàn)控制元素緩慢收起
- jQuery實現(xiàn)的頁面詳情展開收起功能示例
相關(guān)文章
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果。2011-08-08
這篇文章主要為大家詳細介紹了JQuery實現(xiàn)電梯導(dǎo)航效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在項目實戰(zhàn)中碰到了一些問題，例如，jquery如何使div居中，此問題一直困擾著我，因此尋找了一些方法，曬出來和大家分享一下2012-11-11
這篇文章主要介紹了jQuery基礎(chǔ)語法,以實例形式分析了jQuery的對象以及針對對象進行的操作用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
本文主要分享了基于JQuery的獲取鼠標(biāo)進入和離開容器方向的實現(xiàn)代碼，具有一定的參考價值。下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了jQuery ready方法實現(xiàn)原理詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
至于有那些選擇器，在幫助手冊中都有，自己去看，這篇主要是分析他的工作原理，而優(yōu)化我們寫 的選擇器，尤其在頁面內(nèi)容很多的情況下，更應(yīng)該需要優(yōu)化。下邊就言歸正傳。2011-07-07
從上邊的注釋看，jQuery的源碼結(jié)構(gòu)相當(dāng)清晰、條理，不像代碼那般晦澀和讓人糾結(jié)2011-11-11
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實例分析
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法,結(jié)合實例形式分析了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下2019-02-02