博客

jquery实现html表格隔行变色

  • Post author:
  • Post category:其他


效果图

实现代码：

通过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>

转载于:https://www.cnblogs.com/LIANQQ/p/4830787.html