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.Pin垂直滚动时固定导航
May 24 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
基于Python实现一个简单的银行转账操作
2016/03/06 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
实现Python与STM32通信方式
2019/12/18 Python
如何给Python代码进行加密
2020/01/10 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
给海归自荐信的建议
2013/12/13 职场文书
门卫班长岗位职责
2013/12/15 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
英文商务邀请函范文
2015/01/31 职场文书
英语导游词
2015/02/13 职场文书
2016情人节宣传语
2015/07/14 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL