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 Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现手风琴特效
Jan 11 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
Sony CFR 320 修复改造
2020/03/14 无线电
PHP的加密方式及原理
2012/06/14 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php文件缓存方法总结
2016/03/16 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python常用断言函数实例汇总
2020/11/30 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
database面试题
2013/03/28 面试题
资深地理教师自我评价
2013/09/21 职场文书
数控技术与应用毕业生自荐信
2013/09/24 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
趣味运动会广播稿
2014/09/13 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
Python获取字典中某个key的value
2022/04/13 Python