這篇文章主要介紹了jQuery實現表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈式操作的相關技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了jQuery實現表格展開與折疊的方法。分享給大家供大家參考。具體分析如下：
這是很人性化的一款特效代碼，實現點擊其中一個父級，另一個之前打開的父級會自動關閉
- <!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;} /* 偶數行樣式*/
- .odd{ background:#FFFFEE;} /* 奇數行樣式*/
- .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">前臺開發組</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">后臺開發組</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程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
