JavaScript例子2-使一个特定的表格隔行变色-CSDN博客

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             /*window.onload = function() {
 8                 var item = document.getElementById("tb");
 9                 var tbody = document.getElementsByTagName("tbody");错误
10                 var trs =   tbody.getElementsByTagName("tr");
11                 for(var i = 0; i < trs.length; i++) {
12                     if(i%2==0){
13                         trs[i].style.backgroundColor="greenyellow";
14                     }
15                 }
16 
17             };*/
18             window.onload = function(){ //页面所有元素加载完毕
19                 var item  =  document.getElementById("tb");            //获取id为tb的元素(table)
20                 var tbody =  item.getElementsByTagName("tbody")[0];    //获取表格的第一个tbody元素
21                 var trs =   tbody.getElementsByTagName("tr");          //获取tbody元素下的所有tr元素
22                 for(var i=0;i < trs.length;i++){//循环tr元素
23                         if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
24                             trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
25                         }
26                 }
27                 
28             }
29         </script>
30     </head>
31     <body>
32         <table id="tb">
33     <tbody>
34         <tr><td>第一行</td><td>第一行</td></tr>
35         <tr><td>第二行</td><td>第二行</td></tr>
36         <tr><td>第三行</td><td>第三行</td></tr>
37         <tr><td>第四行</td><td>第四行</td></tr>
38         <tr><td>第五行</td><td>第五行</td></tr>
39         <tr><td>第六行</td><td>第六行</td></tr>
40     </tbody>
41 </table>
42     </body>
43 </html>