1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>表格悬停变色Demo</title> 8 <style type="text/css"> 9 .hover { 10 background: #00f; 11 color: #fff; 12 } 13 table { 14 /*border-collapse设置表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开 15 可以取 separate | collapse */ 16 border-collapse: collapse; 17 } 18 </style> 19 <script src="jquery-1.5.2.js" type="text/javascript"></script> 20 <script type="text/javascript"> 21 $(document).ready(function(){ 22 $('tbody tr').hover( 23 function(){ 24 $(this).find('td').addClass('hover'); 25 }, 26 function(){ 27 $(this).find('td').removeClass('hover'); 28 } 29 ); 30 }); 31 </script> 32 <body> 33 <table border="1"> 34 <thead> 35 <tr> 36 <th>Roll</th><th>Name</th><th>Mark</th> 37 </tr> 38 </thead> 39 <tbody> 40 <tr> 41 <td>101</td><td>John</td><td>89</td> 42 </tr> 43 <tr> 44 <td>102</td><td>Bobo</td><td>90</td> 45 </tr> 46 <tr> 47 <td>103</td><td>Cathy</td><td>92</td> 48 </tr> 49 <tr> 50 <td>101</td><td>Duke</td><td>98</td> 51 </tr> 52 </tbody> 53 </table> 54 </body> 55 </html>