效果图
实现代码：
通过css控制样式，利用jquery的addClass方法实现
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title> 实现表格隔行变色 </title>
5 <meta http-equiv="Content-Type" content="text/html; chartset=GBK" />
6 <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
7 <style type="text/css">
8 body{font-size:12px;text-align:center}
9 #tbStu{width:90%;border:solid 1px #666;background-color:#eee}
10 #tbStu tr{line-height:23px}
11 #tbStu tr th{background-color:#ccc;color:#fff}
12 #tbStu .trOdd{background-color:#fff}
13 </style>
14
15 <script>
16 $(function(){
17 $("#tbStu tr:nth-child(even)").addClass("trOdd");}
18 )
19
20
21 </script>
22
23 </head>
24 <body>
25
26 <table id="tbStu" cellpadding="0" cellspacing="0">
27
28 <tbody>
29
30 <tr>
31 <th>学号</th>
32 <th>姓名</th>
33 <th>性别</th>
34 <th>总分</th>
35 </tr>
36
37 <tr>
38 <td>1001</td>
39 <td>张晓明</td>
40 <td>男</td>
41 <td>98</td>
42 </tr>
43
44 <tr>
45 <td>1002</td>
46 <td>李小强</td>
47 <td>男</td>
48 <td>88</td>
49 </tr>
50
51 <tr>
52 <td>1003</td>
53 <td>张小花</td>
54 <td>女</td>
55 <td>88</td>
56 </tr>
57
58 <tr>
59 <td>1004</td>
60 <td>李小妞</td>
61 <td>女</td>
62 <td>88</td>
63 </tr>
64
65 <tr>
66 <td>1001</td>
67 <td>张晓明</td>
68 <td>男</td>
69 <td>98</td>
70 </tr>
71
72 <tr>
73 <td>1002</td>
74 <td>李小强</td>
75 <td>男</td>
76 <td>88</td>
77 </tr>
78
79 <tr>
80 <td>1003</td>
81 <td>张小花</td>
82 <td>女</td>
83 <td>88</td>
84 </tr>
85
86 <tr>
87 <td>1004</td>
88 <td>李小妞</td>
89 <td>女</td>
90 <td>88</td>
91 </tr>
92
93 <tr>
94 <td>1001</td>
95 <td>张晓明</td>
96 <td>男</td>
97 <td>98</td>
98 </tr>
99
100 <tr>
101 <td>1002</td>
102 <td>李小强</td>
103 <td>男</td>
104 <td>88</td>
105 </tr>
106
107 <tr>
108 <td>1003</td>
109 <td>张小花</td>
110 <td>女</td>
111 <td>88</td>
112 </tr>
113
114 <tr>
115 <td>1004</td>
116 <td>李小妞</td>
117 <td>女</td>
118 <td>88</td>
119 </tr>
120
121 <tr>
122 <td>1001</td>
123 <td>张晓明</td>
124 <td>男</td>
125 <td>98</td>
126 </tr>
127
128 <tr>
129 <td>1002</td>
130 <td>李小强</td>
131 <td>男</td>
132 <td>88</td>
133 </tr>
134
135 <tr>
136 <td>1003</td>
137 <td>张小花</td>
138 <td>女</td>
139 <td>88</td>
140 </tr>
141
142 <tr>
143 <td>1004</td>
144 <td>李小妞</td>
145 <td>女</td>
146 <td>88</td>
147 </tr>
148
149
150
151 </tbody>
152
153
154 </table>
155
156 </body>
157 </html>
时间： 2024-10-19 14:09:56