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