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 相关文章推荐
jquery 插件学习(四)
Aug 06 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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+MySql编写聊天室
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
Javascript 赋值机制详解
2014/11/23 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
音乐教师求职信
2014/06/28 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
安全员岗位职责范本
2015/04/11 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Python实现简单得递归下降Parser
2022/05/02 Python