Heim >Web-Frontend >HTML-Tutorial >table 控制单双行颜色以及鼠标hover颜色 table光棒_html/css_WEB-ITnose
table 控制单双行颜色以及鼠标hover颜色 table光棒_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:55:301342Durchsuche
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：一款纯css实现的垂直时间线效果_html/css_WEB-ITnoseNächster Artikel：求解html与css的相关问题，附上代码_html/css_WEB-ITnose