隔行变色及其扩展 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9     <table id="tb1">
10         <tr><td>1</td></tr>
11         <tr><td>2</td></tr>
12         <tr><td>3</td></tr>
13         <tr><td>4</td></tr>
14         <tr><td>5</td></tr>
15         <tr><td>6</td></tr>
16         <tr><td>7</td></tr>
17         <tr><td>8</td></tr>        
18         <tr><td>9</td></tr>
19         <tr><td>10</td></tr>
20     </table>
21 </body>
22 <script type="text/javascript">
23     window.onload = function(){
24         var tb1 = document.getElementById("tb1");
25         var rows = tb1.getElementsByTagName("tr");
26         for(var i = 0; i < rows.length; i++){
27             if (i % 2 == 1){
28                 rows[i].style.backgroundColor="#f00";                
29             }else{
30                 rows[i].style.backgroundColor="#0f0";            
31             }
32         }
33 
34         //extendChangeColor(3);
35     }
36     
37     //隔行变色的扩展，每隔n行进行变色
38     function extendChangeColor(n){
39         var tb1 = document.getElementById("tb1");
40         var rows = tb1.getElementsByTagName("tr");
41         
42         for(var i = 0; i < rows.length; i++){
43             var j = parseInt(i/n);//这里必须取整一下
44             if (j % 2 == 0){
45                 rows[i].style.backgroundColor="#0f0";
46             }else{
47                 rows[i].style.backgroundColor="#f00";
48             }
49         }
50     }
51 </script>
52 </html>
intervalRowChangeColor

 

 

 

posted @ 2018-03-10 12:09  think的海角  阅读(128)  评论(0)    收藏  举报