码迷,mamicode.com
首页 > Web开发 > 详细

08-JS中table隔行换色

时间:2017-11-09 20:48:06      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:utf-8   ==   oct   cells   html   ++   meta   text   order   

JS中table隔行换色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <table id="tab1" border="" cellspacing="" cellpadding="" width="40%">
 9         <thead>
10             <tr>
11                 <td>ID</td>
12                 <td>姓名</td>
13                 <td>年龄</td>
14             </tr>
15         </thead>
16         <tbody>
17             <tr>
18                 <td>1</td>
19                 <td>张三</td>
20                 <td>27</td>
21             </tr>
22             <tr>
23                 <td>2</td>
24                 <td>李四</td>
25                 <td>20</td>
26             </tr>
27             <tr>
28                 <td>3</td>
29                 <td>张可爱</td>
30                 <td>29</td>
31             </tr>
32             <tr>
33                 <td>4</td>
34                 <td>李XX</td>
35                 <td>24</td>
36             </tr>
37             <tr>
38                 <td>5</td>
39                 <td>马小关</td>
40                 <td>35</td>
41             </tr>
42         </tbody>    
43         </table>
44     </body>
45     <script type="text/javascript">
46         window.onload = function(){
47             
48             var oTab = document.getElementById("tab1");
49             var oldColor = "";
50             //鼠标移到单元格上变色
51             for(var i=0;i<oTab.tBodies[0].rows.length;i++){
52                 
53                 oTab.tBodies[0].rows[i].onmouseover=function(){
54                     oldColor = this.style.background;
55                     this.style.background = "yellow";    
56                 }
57                 
58                 oTab.tBodies[0].rows[i].onmouseout=function(){
59                     this.style.background = oldColor;    
60                 }
61                 
62                 //实现各行换色
63                 if(i%2==0){
64                     oTab.tBodies[0].rows[i].style.background = "#ccc";
65                 }else{
66                     oTab.tBodies[0].rows[i].style.background = "";
67                 }
68                 
69             }
70         }
71     </script>
72 </html>

 

08-JS中table隔行换色

标签:utf-8   ==   oct   cells   html   ++   meta   text   order   

原文地址:http://www.cnblogs.com/liuxuanhang/p/7811134.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!