jquery悬停改变表格变色

 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>
posted on 2017-01-18 23:20 Sharpest 阅读(273) 评论(0) 编辑收藏举报