直接上代码：
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>
时间： 2024-08-10 16:58:29