jQuery实现的表格展开伸缩效果实例


Posted in Javascript onSeptember 07, 2016

本文实例讲述了jQuery实现的表格展开伸缩效果。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></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="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('tr.parent').click(function(){ // 获取所谓的父行
    $(this)
    .toggleClass("selected") // 添加/删除高亮
    .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
  });
})
</script>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>暂住地</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent" id="row_01">
      <td colspan="3">前台设计组</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>
  </tbody>
</table>
</body>
</html>

运行效果图如下:

jQuery实现的表格展开伸缩效果实例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
JS实现点击掉落特效
Jan 29 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 #Javascript
JS简单实现浮动窗口效果示例
Sep 07 #Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 #Javascript
Vue.js快速入门教程
Sep 07 #Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 #Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 #Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 #Javascript
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP If Else(elsefi) 语句
2013/04/07 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP生成条形图的方法
2014/12/10 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP 实现重载
2021/03/09 PHP
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
layui使用label标签的方法
2019/09/14 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python time()的实例用法
2020/11/03 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
如何写一封打动人心的求职信
2014/02/17 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
招聘专员岗位职责
2014/03/07 职场文书
遗嘱继承公证书
2014/04/09 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
路政管理求职信
2014/06/18 职场文书
店铺转让协议书
2014/12/02 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
话题作文之生命的旋律
2019/12/17 职场文书