vetty

实现鼠标放上高亮显示,鼠标移出显示原来的颜色

1.通过jQuery的形式实现

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <title>Bootstrap 实例 - 边框表格</title>
 5   <style type="text/css">
 6     .hover{background:#F00;}
 7 </style>
 8    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 9    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
10    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
11 <script type="text/javascript">
12     $(function(){
13     $("td").hover(
14         function(){
15             $(this).addClass("hover");
16             },
17             
18         function(){
19                     $(this).removeClass("hover");
20             }
21     );
22         });
23 </script>
24 </head>
25 <body>
26 
27 <table class="table table-bordered">
28    <caption>边框表格布局</caption>
29    <thead>
30       <tr>
31          <th>名称</th>
32          <th>城市</th>
33          <th>密码</th>
34       </tr>
35    </thead>
36    <tbody>
37       <tr>
38          <td>Tanmay</td>
39          <td>Bangalore</td>
40          <td>560001</td>
41       </tr>
42       <tr>
43          <td>Sachin</td>
44          <td>Mumbai</td>
45          <td>400003</td>
46       </tr>
47       <tr>
48          <td>Uma</td>
49          <td>Pune</td>
50          <td>411027</td>
51       </tr>
52    </tbody>
53 </table>
54 
55 </body>
56 </html>

 2.通过javascript原生实现

代码如下：

 1     <!DOCTYPE HTML>  
 2     <html>  
 3     <head>  
 4     <meta charset="utf-8">  
 5     <title></title>  
 6     <script>  
 7         window.onload=function ()  
 8         {  
 9             var oTab=document.getElementById('tab1');  
10             var oldColor='';//用于保存原来一行的颜色  
11               
12             for(var i=0;i<oTab.tBodies[0].rows.length;i++)//oTab.tBodies[0].rows.length表示tBodies中有几行  
13             {  
14                 oTab.tBodies[0].rows[i].onmouseover=function ()  
15                 {  
16                     oldColor=this.style.background;  
17                     this.style.background="green";  
18                 };  
19                 oTab.tBodies[0].rows[i].onmouseout=function ()  
20                 {  
21                       
22                     this.style.background=oldColor;//鼠标移出的时候将本行的颜色设置为原来的颜色，而原来的颜色保存在oldColor中  
23       
24                 };  
25                   
26                   
27                 if(i%2)  
28                 {  
29                     oTab.tBodies[0].rows[i].style.background="#CCC";  
30       
31                 }else{    
32                     oTab.tBodies[0].rows[i].style.background="";  
33                       
34                 }  
35             }  
36               
37         };  
38       
39      </script>  
40     </head>  
41       
42     <body>  
43     <table id="tab1" border="1" width="500">  
44         <thead>  
45             <td>ID</td>  
46             <td>姓名</td>  
47             <td>年龄</td>  
48         </thead>  
49       
50         <tbody>  
51         <tr>  <td>1</td>  
52             <td>Xuan</td>  
53             <td>23</td>  
54         </tr>  
55       
56         <tr>  <td>2</td>  
57             <td>XXX</td>  
58             <td>25</td>  
59         </tr>  
60       
61         <tr>  <td>3</td>  
62             <td>SSS</td>  
63             <td>24</td>  
64         </tr>  
65       
66         <tr>  <td>4</td>  
67             <td>李四</td>  
68             <td>26</td>  
69         </tr>  
70       
71         <tr>  <td>5</td>  
72             <td>王五</td>  
73             <td>29</td>  
74         </tr>  
75         </tbody>  
76     </table>  
77     </body>  
78     </html>

 

posted on 2015-03-09 16:54  cocos2014  阅读(1059)  评论(0)  编辑  收藏  举报

导航