天易24----jquery实现表格的展开伸缩

标签: jquery 表格 | 发表时间:2012-11-26 20:03 | 作者:wangzihu
出处:http://blog.csdn.net

一:示例图如下:

1)默认打开状态:


2)当点击第一组时:


二:示例代码:

<%@ 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//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title></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="styles.css">
	-->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.t').click(function(){
			$(this).toggleClass("selected").siblings(".child_"+this.id).toggle();
		}).click();//不添加click()方法默认打开是全展现
	
	});
</script>
<style type="text/css">
*{padding:0;margin:0;}
body {padding:100px;font-size:12px;font-family:"宋体";}
table{border-coliapse:coliapse;}
th{border-bottom:1px solid #000;padding:5px 15px;}
td{padding:5px 15px;}
.t{background:#eee;cursor:pointer;}
.selected{background:#ccc}
</style> 
</head>

<body>
<table border="1">
	<thead>
		<th>姓名</th><th>年龄</th><th>电话</th>
	</thead>
	<tbody>
		<tr class="t" id="row_1"><td colspan="3">第一组</td></tr>
		<tr class="child_row_1"><td>王子虎</td><td>22</td><td>13064073789</td></tr>
		<tr class="child_row_1"><td>王子虎1</td><td>21</td><td>13064073701</td></tr>
		<tr class="t" id="row_2"><td colspan="3">第二组</td></tr>
		<tr class="child_row_2"><td>王子虎2</td><td>23</td><td>13064073702</td></tr>
		<tr class="child_row_2"><td>王子虎3</td><td>24</td><td>13064073703</td></tr>
		<tr class="t" id="row_3"><td colspan="3">第三组</td></tr>
		<tr class="child_row_3"><td>王子虎4</td><td>25</td><td>13064073704</td></tr>
		<tr class="child_row_3"><td>王子虎5</td><td>26</td><td>13064073705</td></tr>
	</tbody>
</table>
</body>
</html>










作者:wangzihu 发表于2012-11-26 20:03:35 原文链接
阅读:0 评论:0 查看评论

相关 [jquery 表格] 推荐:

【分享】jQuery 表格Table插件汇总

- - HTML5研究小组
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等. Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧.

JQuery表格插件介绍:Flexigrid和DataTables

- - 四火的唠叨
文章系本人原创,转载请保持完整性并注明出自 《四火的唠叨》. Flexigrid和 DataTables是我最近使用的,并且功能比较强大,在这里介绍一下. 如果你在寻找前端绘制表格的插件,可以考虑它们. 官方Flexigrid的特性展示:. 支持XML/JSON格式的Ajax数据源. JavaScript API支持.

天易24----jquery实现表格的展开伸缩

- - CSDN博客推荐文章
}).click();//不添加click()方法默认打开是全展现. 姓名年龄电话. 第一组. 王子虎2213064073789.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快,你应该总是使用最新的版本. 因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.

jQuery Tools:Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡)、Tooltip(信息提示)、Overlay(遮罩、弹窗)、Scrollable(滚动控制)、Form Validator(表单验证)、Rangeinput(范围选择)、Dateinput(日期选择)等众多功能.

jQuery基础之jQuery的DOM操作

- - CSDN博客推荐文章
 为了能全面地讲解DOM操作,首先需要构建一个网页. 因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.    

你最喜欢的水果是?

 .      
  • 苹果
  •  .      
  • 橘子
  •  .