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

更新時(shí)間：2015年05月04日 15:16:56 投稿：shichen2014

這篇文章主要介紹了jQuery實(shí)現(xiàn)表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

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

這是很人性化的一款特效代碼，實(shí)現(xiàn)點(diǎn)擊其中一個(gè)父級(jí)，另一個(gè)之前打開的父級(jí)會(huì)自動(dòng)關(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">前臺(tái)開發(fā)組</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南長(zhǎng)沙</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td><td>浙江溫州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后臺(tái)開發(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>

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

您可能感興趣的文章:

相關(guān)文章

jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用介紹
jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用，需要的朋友可以參考下。
2011-10-10
使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告
下面小編就為大家?guī)?lái)一篇使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-07-07
jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)變寬的效果,實(shí)例演示了jQuery的Kwicks插件實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)與頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-04-04
基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
這篇文章主要介紹了基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏效果，當(dāng)頁(yè)面向下滾動(dòng)的時(shí)候，導(dǎo)航菜單動(dòng)態(tài)隱藏，頁(yè)面滾動(dòng)到頂部時(shí)，導(dǎo)航菜單動(dòng)態(tài)顯示，淘寶也采用過此效果，感興趣的小伙伴們可以參考一下
2015-11-11
jquery 交替為表格添加樣式的代碼
學(xué)習(xí)了jquery,發(fā)現(xiàn)其功能真的很令我驚訝，為表格添加背景色用css也可以實(shí)現(xiàn)，卻不得不在<tr>標(biāo)簽里一行一行地添加，但用jquery只需四行代碼，就是這樣精簡(jiǎn)的用法，讓我對(duì)jquery產(chǎn)生了極大的興趣，也不得不驚嘆新興的技術(shù)所帶來(lái)的效率！
2010-01-01
ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)
這篇文章主要介紹了ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05
jquery如何實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)
實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)的方法有很多，在接下來(lái)的文章中為大家介紹下，jquery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過
2013-12-12
jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
jQuery獲取單擊節(jié)點(diǎn)對(duì)象的方法
這篇文章主要介紹了jQuery獲取單擊節(jié)點(diǎn)對(duì)象的方法,涉及jQuery操作鼠標(biāo)事件與頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06
Jquery和BigFileUpload實(shí)現(xiàn)大文件上傳及進(jìn)度條顯示
這篇文章主要介紹了Jquery和BigFileUpload實(shí)現(xiàn)大文件上傳及進(jìn)度條顯示的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06