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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php四种基础算法代码实例
2013/10/29 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
详解json在php中的应用
2018/09/30 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
解决vue addRoutes不生效问题
2020/08/04 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python中DJANGO简单测试实例
2015/05/11 Python
windows下python和pip安装教程
2018/05/25 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
保险专业大专生求职信
2013/10/26 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
授权委托书公证
2014/09/14 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
开展警示教育活动总结
2015/05/09 职场文书
初中家长意见
2015/06/03 职场文书
2019通用版导游词范本!
2019/08/07 职场文书