<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>表格隔行變色_CSS實現鼠標懸停高亮</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="../jquery-1.8.2.js"></script> <script type="text/javascript"> $(function(){ //通過jQuery控制表格隔行換色，並鼠標懸停變色 $('tr:even:gt(0)').addClass('tr_even'); //默認偶數行背景色，無視標題行用:gt(0) $('tr:odd').addClass('tr_odd'); //默認奇數數行背景色 //////////////////////////////////////////////////////////////// }); </script> <style type="text/css"> .headCls{background-color:#ccc;} /* 標題背景色 */ .tr_even{background-color:#EBF8FF} /* 偶數行背景色 */ .tr_odd{background-color:#DDECF3} /* 奇數行背景色 */ .tr_even:hover,.tr_odd:hover{background-color:red;} /* 通過CSS實現鼠標懸停高亮色 */ </style> </head> <body> <table border="1" width="100%" cellspacing="0" cellpadding="0"> <tr class="headCls"> <th>CSS實現鼠標懸停高亮</th> <th>CSS實現鼠標懸停高亮</th> </tr> <tr> <td>data1_1</td> <td>data1_2</td> </tr> <tr> <td>data2_1</td> <td>data2_2</td> </tr> <tr> <td>data3_1</td> <td>data3_2</td> </tr> <tr> <td>data4_1</td> <td>data4_2</td> </tr> <tr> <td>data5_1</td> <td>data5_2</td> </tr> </table> </body> </html>