html table单双行颜色间隔

浏览数：76 / 时间：2015年06月09日

直接上代码：

 1 <html>
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html; charset=gb3212">
 4         <title>单双行显示不同颜色</title>
 5         <script type="text/javascript">
 6             window.onload = function color(){
 7                 var table = document.getElementById("person");
 8                 var rows = table.getElementsByTagName("tr");
 9                 for(var i=0;i<rows.length;i++){
10                     if (i%2==0){
11                         rows[i].style.backgroundColor = "#EAF2D3"
12                     }else{
13                         rows[i].style.backgroundColor = "White";
14                     }
15                 }
16             }
17         </script>
18         <style type = "text/css">
19             #person
20                 {
21                     border-style:1px solid;
22                     border-color:blue;
23                     font-weight:bold;
24                     font-family:楷体,Arial,Helvetica, sans-serif;
25                     border-collapse:collapse;
26                     margin:auto;
27                 }
28             #person th
29                 {
30                     border:1px solid;
31                     padding:3px 7px 2px 7px
32                     background-color:#A7C942
33                     color:#ffffff
34                     text-align:center;
35                 }
36             #person td
37                 {
38                     border-style:solid;
39                     border-width:1px;
40                     text-align:center;
41                 }
42         </style>
43     </head>
44     <body>
45         <table id="person" align="center" width = "90%" height="200">
46             <tr>
47                 <th>姓名</th>
48                 <th>性别</th>
49                 <th>电话</th>
50                 <th>爱好</th>
51             </tr>
52             <tr>
53                 <td>zhangsan</td>
54                 <td>male</td>
55                 <td>123456</td>
56                 <td>swimming</td>
57             </tr>
58             <tr>
59                 <td>zhangsan</td>
60                 <td>male</td>
61                 <td>123456</td>
62                 <td>swimming</td>
63             </tr>
64             <tr>
65                 <td>zhangsan</td>
66                 <td>male</td>
67                 <td>123456</td>
68                 <td>swimming</td>
69             </tr>            
70         </table>
71     </body>
72 </html>