jQuery实现表格展开与折叠的方法


Posted in Javascript onMay 04, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js 图片缩放(按比例)控制代码
May 27 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
JS数字抽奖游戏实现方法
May 04 #Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 #Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 #Javascript
js实现每日自动换一张图片的方法
May 04 #Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 #Javascript
JavaScript中操作字符串小结
May 04 #Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 #Javascript
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python的turtle库使用详解
2019/05/10 Python
python通过http下载文件的方法详解
2019/07/26 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
导师就业推荐信范文
2014/05/22 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
vue实现移动端div拖动效果
2022/03/03 Vue.js