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鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jquery插件实现搜索历史
Apr 24 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
网友原创的PHP模板类代码
2008/09/07 PHP
php url路由入门实例
2014/04/23 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue2.0之多页面的开发的示例
2018/01/30 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python实现井字棋游戏
2020/03/30 Python
Python文件读写常见用法总结
2019/02/22 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
电气自动化求职信
2014/06/24 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
高中家长意见怎么写
2015/06/03 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android