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ì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果示例【測試可用】
- jquery控制頁面的展開和隱藏實(shí)現(xiàn)方法(推薦)
- 基于jQuery實(shí)現(xiàn)下拉收縮(展開與折疊)特效
- jQuery實(shí)現(xiàn)DIV層收縮展開的方法
- jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼
- jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開折疊效果
- jQuery實(shí)現(xiàn)文本展開收縮特效
- jquery實(shí)現(xiàn)先淡出再折疊收起的動畫效果
- jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
- jQuery實(shí)現(xiàn)的頁面詳情展開收起功能示例
相關(guān)文章
JQuery實(shí)現(xiàn)電梯導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)電梯導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向
本文主要分享了基于JQuery的獲取鼠標(biāo)進(jìn)入和離開容器方向的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值。下面跟著小編一起來看下吧2016-12-12jQuery ready方法實(shí)現(xiàn)原理詳解
這篇文章主要介紹了jQuery ready方法實(shí)現(xiàn)原理詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實(shí)例分析
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法,結(jié)合實(shí)例形式分析了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下2019-02-02