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,超强推荐base.js
Dec 23 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
JS实现随机抽取三人
Nov 06 Javascript
小程序实现录音上传功能
Nov 22 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
使用无限生命期Session的方法
2006/10/09 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
python增加图像对比度的方法
2019/07/12 Python
对Python _取log的几种方式小结
2019/07/25 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
详解KMP算法以及python如何实现
2020/09/18 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
《蜗牛》教学反思
2014/02/18 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
服务标语口号
2014/07/01 职场文书
六查六看六改心得体会
2014/10/14 职场文书
人事聘任通知
2015/04/21 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python