<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ text-align: center; font-weight: bold; } tr{ height: 32px; } </style> <script src="jquery-1.8.3.js"></script> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="400"> <tr> <td>編號</td> <td>姓名</td> <td>年齡</td> </tr> <tr> <td>1</td> <td>張三</td> <td>18</td> </tr> <tr> <td>2</td> <td>李四</td> <td>19</td> </tr> <tr> <td>3</td> <td>王五</td> <td>20</td> </tr> <tr> <td>4</td> <td>趙六</td> <td>21</td> </tr> <tr> <td>5</td> <td>錢七</td> <td>22</td> </tr> </table> </body> <script type="text/javascript"> // 設置表頭的顏色 表頭不須要高亮顯示 $('table tr:first').css({'background':'#694d9f'}); $('table tr:even').not('table tr:first').css({'background':'#888'}); $('table tr:odd').css({'background':'#ccc'}); // 表頭是不須要高亮顯示的 $('table tr').not('table tr:first').hover( function(){ color=$(this).css('backgroundColor'); // 獲取以前的背景顏色 $(this).css({'background':'yellow'}); }, function(){ $(this).css({'background':color}); } ); </script> </html>