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 相关文章推荐
javascript iframe编程相关代码
Dec 28 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
原生js实现随机点名功能
Nov 05 Javascript
JS实现秒杀倒计时特效
Jan 02 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
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
PHP微商城开源代码实例
2019/03/27 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
Python创建日历实例
2014/08/21 Python
python实现ipsec开权限实例
2014/11/11 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python多进程原理与用法分析
2018/08/21 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
详解python编译器和解释器的区别
2019/06/24 Python
python实现中文文本分句的例子
2019/07/15 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
幼师专业毕业生自荐信
2013/09/29 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2014年优秀党员材料
2014/12/18 职场文书