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>
效果图：
附件下载：http://files.cnblogs.com/Orange-C/TableDemo.zip 出处 http://www.cnblogs.com/Orange-C/p/4049832.html
时间： 2024-10-22 11:37:27