這個地方的難點在於，如何來維護一個分組名稱和分組之間的數據的關係，我們可以通過一些屬性來進行維護，例如對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>