jQuery_review之table根据内容分组进行折叠显示以及，折叠之后高亮显示的实现

最新推荐文章于 2022-09-09 10:59:23 发布

陈字文

最新推荐文章于 2022-09-09 10:59:23 发布

阅读量4.5k

点赞数

分类专栏： JavaScript相关

本文链接：https://blog.csdn.net/ziwen00/article/details/38143443

版权

JavaScript相关专栏收录该内容

28 篇文章 0 订阅

订阅专栏

对于表格而言，应当提供丰富的功能，从而让用户有不同的感觉。例如，需要根据性质进行各种分组。现在很多RIA的第三方的软件都有很多非常强大的功能来提供对数据的筛选，分类，以及各种统计。现在通过对表单元组内容的分组来进行折叠，并且对折叠之后的内容进行高亮显示。

这个地方的难点在于，如何来维护一个分组名称和分组之间的数据的关系，我们可以通过一些属性来进行维护，例如对cospan的列指定一个class属性，名字叫做col，他的组成元素分别命名为col1，col2这样就可以通过[attribute^=col]的形式来过滤出所有在当前分组中的元素了。这里有两个方法，需要着重的看一下，如何隐藏显示当前的页面？ hide(),show()，slideUp，slideDown，fadeIn，fadeOut，animate,toggle。如何对当前的css进行切换呢？toggleClass()。jQuery提供了非常强大的选择器以及函数来支持这些实现，非常不错。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript" src="jquery-1.8.3.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("td[colspan]").click(function(){
  			$(this).toggleClass("heighLight");
  			$("tbody>tr[class^="+$(this).text()+"]").toggle();
  		});
  	})
  </script>
  <style type="text/css">
  	table{
  		text-align:center;
  		width:400px;
  		height:100px;
  		border:solid #000 1px;
  	}
  	thead tr td{
  		border-bottom:solid #000 1px;
  	}
  	td.heighLight{
  		background-color:#E49B1A;
  	}
  	tr.cata{
  		text-align:left;
  		background-color:grey;
  	}
  </style>
  </head>
  <body>
  	<table>
  		<thead>
  			<tr><td>fruit</td><td>price</td><td>date</td></tr>
  		</thead>
  		<tbody>
  			<tr class="cata"><td colspan="3">fruit1</td></tr>
  			<tr class="fruit1_1"><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr>
  			<tr class="fruit1_2"><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
  			<tr class="fruit1_3"><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
  			<tr class="fruit1_4"><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
  			<tr class="cata"><td colspan="3">fruit2</td></tr>
  			<tr class="fruit2_1"><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
  			<tr class="fruit2_2"><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr>
  			<tr class="fruit2_3"><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
  			<tr class="fruit2_4"><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
  			<tr class="cata"><td colspan="3">fruit3</td></tr>
  			<tr class="fruit3_1"><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
  			<tr class="fruit3_2"><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
  		</tbody>
  	</table>
  </body>
</html>

陈字文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_review之table根据内容分组进行折叠显示以及，折叠之后高亮显示的实现

对于表格而言，应当提供丰富的功能，从而让用户有不同的感觉。例如，需要根据性质进行各种分组。现在很多RIA的第三方的软件都有很多非常强大的功能来提供对数据的筛选，分类，以及各种统计。现在通过对表单元组内容的分组来进行折叠，并且对折叠之后的内容进行高亮显示。这个地方的难点在于，如何来维护一个分组名称和分组之间的数据的关系，我们可以通过一些属性来进行维护，例如对cospan的列
复制链接

扫一扫