table 控制单双行颜色以及鼠标hover颜色 table光棒

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5     <title>table 控制单双行颜色以及鼠标hover颜色</title>
  6     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
  7     <style type="text/css">
  8         a
  9         {
 10             font-size: 16px;
 11             line-height: 20px;
 12         }
 13         a:link
 14         {
 15             color: Black; /*未访问：黑色、无下划线 -*/
 16             text-decoration: none;
 17         }
 18         a:active:
 19         {
 20             color: Orange; /*激活：红色 -*/
 21         }
 22         a:visited
 23         {
 24             color: Black;
 25             text-decoration: none; /*已访问：Black、无下划线 -*/
 26         }
 27         a:hover
 28         {
 29             color: Orange;
 30             text-decoration: underline; /*鼠标移近：红色、下划线 -*/
 31         }
 32         p
 33         {
 34             width: 700px;
 35             margin: 10px 0 0 0;
 36             padding: 10px;
 37             border: 0;
 38             border: 1px dotted Orange;
 39             background: #f5f5f5;
 40             min-height: 25px;
 41         }
 42         table.tableList
 43         {
 44             border-collapse: collapse;
 45             border: solid 1px Orange;
 46             width: 100%;
 47             text-align: center;
 48         }
 49         table.tableList th
 50         {
 51             padding: 1px 6px;
 52             line-height: 21px;
 53             font-weight: bolder;
 54         }
 55         table.tableList td
 56         {
 57             padding: 1px 6px;
 58             line-height: 21px;
 59         }
 60         table.tableList .hot
 61         {
 62             background-color: #FFFACD;
 63         }
 64         table.tableList .toleft
 65         {
 66             text-align: left;
 67         }
 68         table.tableList .toright
 69         {
 70             text-align: right;
 71         }
 72         table.tableList .tomiddle
 73         {
 74             text-align: center;
 75         }
 76     </style>
 77     <script language="javascript" type="text/javascript">
 78         window.onload = function () {
 79             changeTableStyle();
 80         }
 81         function changeTableStyle() {   //修改数据列表样式
 82             var oldcolor;
 83             $(".tableList td").css({ 'border-left': '#C9CACA 1px solid', color: '#000' });
 84             $(".tableList tr:even").css('background-color', '#E2E7EA');
 85             $(".tableList tr").hover(
 86                 function () {
 87                     if ($(this).attr("class") != "trhead") {
 88                         oldcolor = $(this).css('background-color'); $(this).css('background-color', '#BADDE9')
 89                     }
 90                 },
 91                 function () {
 92                     if ($(this).attr("class") != "trhead") {
 93                         $(this).css('background-color', oldcolor)
 94                     }
 95                 }
 96               );
 97             $(".trhead").css({ background: "Orange" });
 98         }
 99     </script>
100 </head>
101 <body>
102     <p>
103         table 控制单双行颜色以及鼠标hover颜色<br />
104         hot :tr背景变色
105         <br />
106         tomiddle:td内文字居中
107         <br />
108         toright:td内文字居右<br />
109         toLeft :td内文字居左<br />
110     </p>
111     <br />
112     <table class="tableList">
113         <tr class="trhead">
114             <th>
115                 来源
116             </th>
117             <th>
118                 标题
119             </th>
120             <th>
121                 标题
122             </th>
123             <th>
124                 标题
125             </th>
126             <th>
127                 标题
128             </th>
129             <th>
130                 标题
131             </th>
132         </tr>
133         <tr>
134             <td>
135                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
136             </td>
137             <td>
138                 测试文字
139             </td>
140             <td>
141                 测试文字
142             </td>
143             <td>
144                 测试文字
145             </td>
146             <td>
147                 测试文字
148             </td>
149             <td>
150                 测试文字
151             </td>
152         </tr>
153         <tr>
154             <td>
155                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
156             </td>
157             <td>
158                 测试文字
159             </td>
160             <td>
161                 测试文字
162             </td>
163             <td>
164                 测试文字
165             </td>
166             <td>
167                 测试文字
168             </td>
169             <td>
170                 测试文字
171             </td>
172         </tr>
173         <tr class="hot">
174             <td>
175                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
176             </td>
177             <td class="tomiddle">
178                 测试文字
179             </td>
180             <td class="toright">
181                 测试文字
182             </td>
183             <td class="toleft">
184                 测试文字
185             </td>
186             <td>
187                 测试文字
188             </td>
189             <td>
190                 测试文字
191             </td>
192         </tr>
193         <tr>
194             <td>
195                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
196             </td>
197             <td>
198                 测试文字
199             </td>
200             <td>
201                 测试文字
202             </td>
203             <td>
204                 测试文字
205             </td>
206             <td>
207                 测试文字
208             </td>
209             <td>
210                 测试文字
211             </td>
212         </tr>
213         <tr>
214             <td>
215                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
216             </td>
217             <td>
218                 测试文字
219             </td>
220             <td>
221                 测试文字
222             </td>
223             <td>
224                 测试文字
225             </td>
226             <td>
227                 测试文字
228             </td>
229             <td>
230                 测试文字
231             </td>
232         </tr>
233         <tr>
234             <td>
235                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
236             </td>
237             <td>
238                 测试文字
239             </td>
240             <td>
241                 测试文字
242             </td>
243             <td>
244                 测试文字
245             </td>
246             <td>
247                 测试文字
248             </td>
249             <td>
250                 测试文字
251             </td>
252         </tr>
253         <tr>
254             <td>
255                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
256             </td>
257             <td>
258                 测试文字
259             </td>
260             <td>
261                 测试文字
262             </td>
263             <td>
264                 测试文字
265             </td>
266             <td>
267                 测试文字
268             </td>
269             <td>
270                 测试文字
271             </td>
272         </tr>
273         <tr>
274             <td>
275                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
276             </td>
277             <td>
278                 测试文字
279             </td>
280             <td>
281                 测试文字
282             </td>
283             <td>
284                 测试文字
285             </td>
286             <td>
287                 测试文字
288             </td>
289             <td>
290                 测试文字
291             </td>
292         </tr>
293         <tr>
294             <td>
295                 <a href="http://www.cnblogs.com/Orange-C/">Orange.</a>
296             </td>
297             <td>
298                 测试文字
299             </td>
300             <td>
301                 测试文字
302             </td>
303             <td>
304                 测试文字
305             </td>
306             <td>
307                 测试文字
308             </td>
309             <td>
310                 测试文字
311             </td>
312         </tr>
313     </table>
314 </body>
315 </html>
效果图：
附件下载：https://files.cnblogs.com/Orange-C/TableDemo.zip 出处 http://www.cnblogs.com/Orange-C/p/4049832.html
posted @ 2014-10-25 10:53 Orange. 阅读(3274) 评论(0) 编辑收藏举报
刷新页面返回顶部