jQuery实现table表格信息的展开和缩小功能示例


Posted in jQuery onJuly 21, 2018

本文实例讲述了jQuery实现table表格信息的展开和缩小功能。分享给大家供大家参考,具体如下:

<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>" rel="external nofollow" >
  <title>My JSP 'index4.jsp' startingpage</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" type="text/css" href="css/index9.css" rel="external nofollow" >
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
  <table width="200px" height="100px" border="1">
  <tr>
  <td>编号</td>
  <td>姓名</td>
  <td>成绩</td>
  </tr>
  <tr align="left" class="parent" id="row1"><td colspan="3">学生信息</td></tr>
  <tr class="child_row1">
  <td>001</td>
  <td>小明</td>
  <td>80</td>
  </tr>
  <tr class="child_row1">
  <td>002</td>
  <td>张三</td>
  <td>79</td>
  </tr>
  </table>
  <script type="text/javascript">
  $(function() {
  $("tr.parent").click(function() {
  $(this).toggleClass("selected").siblings('.child_'+this.id).toggle(); 
  });
});
  </script>
  </body>
</html>

运行效果如下

jQuery实现table表格信息的展开和缩小功能示例

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

jQuery 相关文章推荐
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
You might like
递归列出所有文件和目录
2006/10/09 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
Json解析的方法小结
2016/06/22 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
Python中and和or如何使用
2020/05/28 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
HTML5进度条特效
2014/12/18 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
简单而又朴实的个人求职信分享
2013/12/12 职场文书
市场拓展计划书
2014/05/03 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
学校社会实践活动总结
2014/07/03 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
个人优缺点总结
2015/02/28 职场文书
感恩教育主题班会
2015/08/12 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫