標籤：style java color os io cti html javascript
繼續複習jQuery，對table來說，上面除了單選之外，還有多選的一個控制。對於多選來說，需要對多選的內容進行高亮顯示，還應該在頁面載入的時候，對已經預設選中的內容進行高亮。這些小功能也是複習jQuery選取器的一個很好地素材，有非常多的實現方式，不僅僅拘泥於一種，只要能將功能健壯的實現了，就是比較不錯的了。在一本資料上，看到了這樣的一種jQuery的寫法，還是非常的驚豔！ element[hasClassName?"removeClass":"addClass"]("className")，在中括弧中間的內容就是一個三目運算式，三目運算式的結果可以與後面的參數行程一個操作。就是removeClass()還是addClass()。這還是非常不錯的，也體現了jQuery設計的宗旨，從另一個角度來看，也體現瞭解釋性語言的強大的一面，在這Java ，c++等語言中是不太好理解的。
<%@ 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>td:has(:checked)").parent().find("td").addClass("selected"); $("tbody>tr").click(function(){ if($(this).find(":checkbox").attr("checked")){ $(this).find("td").removeClass("selected") .end().find(":checkbox").attr("checked",false); }else{ $(this).find("td").addClass("selected") .end().find(":checkbox").attr("checked",true); } }); $(":checkbox").click(function(){ $(this).parents("tr").trigger("click"); }); }) </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="checkbox" value="fruit1"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr> <tr><td><input type="checkbox" value="fruit2"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr> <tr><td><input type="checkbox" value="fruit3" checked="true"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr> <tr><td><input type="checkbox" value="fruit4"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr> <tr><td><input type="checkbox" value="fruit5"></td><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr> <tr><td><input type="checkbox" value="fruit6"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr> <tr><td><input type="checkbox" value="fruit7"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr> <tr><td><input type="checkbox" value="fruit8"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr> <tr><td><input type="checkbox" value="fruit9"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr> <tr><td><input type="checkbox" value="fruit0"></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
