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