標籤：style java color 使用 os io cti html
在各種WEB系統中經常可以看到類似的操作，點擊中列表的某一行，然後當前行就會變成其他的顏色，並且其中的radio就會被選中。並且一般還會滑鼠滑過的時候的動態特效，比如滑鼠滑過當前行的時候會有一個變色的樣式。趁著複習jQuery的機會，看一下使用jQuery來實現這個功能的步驟。在這個功能當中，有一個需要注意的小知識點：如何增加一個radio？在HTML中，增加一個HTML使用如下的代碼<input type="radio" name="fruit">這樣子，HTML解析引擎會幫幫我們做一件事情，就是會為我們維持這樣一個規則，同一個name的radio框在同一時間只能被選擇一個，這個也是為什麼這個框通常被稱之為單選框的原因了。此外，無論在哪個功能的實現中，最重要的當然就是如何選中當前頁面的元素了。在這個DEMO中，會用到下面幾種選擇的方式。element.hasClass("aClass")這個會返回一個boolean值，這個是用來判斷當前的元素是不是含有aClass樣式。element.removeClass(‘aClass‘)是從element上刪除aClass這個類型。element.find(selector)是從當前的element元素中找到符合選取器的元素，在jQuery凡是能夠將選取器作為參數傳入的函數，都是功能比較強大的，例如filter(),例如has()等。
<%@ 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(){ $("tbody>tr:odd").css("background-color","#FEF2E8"); $("tbody>tr:even").css("background-color","white"); $("tbody>tr").click(function(){ $(this).find(":radio").attr("checked",true) .end().find("td").addClass("selected") .end().siblings().find("td").removeClass("selected"); }); }) </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.selected{ background-color:#E49B1A; } td.hover{ background-color:#EAFFE6; } </style> </head> <body> <table> <thead> <tr><td></td><td>fruit</td><td>price</td><td>date</td></tr> </thead> <tbody> <tr><td><input type="radio" name="fruit"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr> <tr><td><input type="radio" name="fruit"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr> <tr><td><input type="radio" name="fruit"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr> <tr><td><input type="radio" name="fruit"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr> <tr><td><input type="radio" name="fruit"></td><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr> <tr><td><input type="radio" name="fruit"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr> <tr><td><input type="radio" name="fruit"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr> <tr><td><input type="radio" name="fruit"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr> <tr><td><input type="radio" name="fruit"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr> <tr><td><input type="radio" name="fruit"></td><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
