利用鼠标事件完成表格的高亮显示 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>利用鼠标事件完成表格的高亮显示</title>
 6         <script>
 7             function changeColor(id,val)
 8             {
 9                 if(val=="over")
10                 {
11                     document.getElementById(id).style.backgroundColor="cornflowerblue";
12                 }else if(val=="out")
13                 {
14                     document.getElementById(id).style.backgroundColor="white";
15                 }
16                 
17             }
18         </script>
19         <style type="text/css">
20          td
21          {
22            width:150px;
23            font-size:15px;
24            text-align:center;
25          }
26          input
27          {
28            text-align:center;
29          }
30         </style>
31     </head>
32     <body>
33         <div align="center">
34             <form action="" method="post" >
35                 <table border="1px" width="500px"height="50px" align="center">
36                     <thead>
37                         <tr>
38                             <th><input type="checkbox" id="checkAll"/></th>
39                             <th>商品名称</th>
40                             <th>商品价格</th>
41                             <th>购买数量</th>
42                             <th>商品总价</th>
43                         </tr>
44                     </thead>
45                     
46                     <tbody>
47                         <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
48                             <td><input type="checkbox"/></td>
49                             <td>华为P20</td>
50                             <td>4500</td>
51                             <td></td>
52                             <td></td>
53                         </tr>
54                         <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
55                             <td><input type="checkbox"/></td>
56                             <td>iphoneX</td>
57                             <td>8000</td>
58                             <td></td>
59                             <td></td>
60                         </tr>
61                         <tr  onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
62                             <td><input type="checkbox"/></td>
63                             <td>小米6</td>
64                             <td>2399</td>
65                             <td></td>
66                             <td></td>
67                         </tr>
68                         <tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
69                             <td><input type="checkbox"/></td>
70                             <td>OPPOR11</td>
71                             <td>1899</td>
72                             <td></td>
73                             <td></td>
74                         </tr>
75                     </tbody>
76                 </table>
77             </form>
78         </div>
79     </body>
80 </html>>
View Code

 

posted @ 2018-05-05 19:51  Kusion_Lee  阅读(231)  评论(0)    收藏  举报