这篇文章主要介绍了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程序设计有所帮助。
新闻热点
疑难解答
图片精选
