標籤：style java color os 資料 io cti html
對於表格而言，應當提供豐富的功能，從而讓使用者有不同的感覺。例如，需要根據性質進行各種分組。現在很多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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
