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代码
Aug 04 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
bootstrap table小案例
Oct 21 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
微信小程序日历效果
Dec 29 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
JS实现打字游戏
2019/12/17 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
Python实现的简单算术游戏实例
2015/05/26 Python
解决Python requests 报错方法集锦
2017/03/19 Python
Python之reload流程实例代码解析
2018/01/29 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
什么是Web Service?
2012/07/25 面试题
信息管理专业推荐信
2013/10/29 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
Python中的套接字编程是什么?
2021/06/21 Python