Rumah >hujung hadapan web >html tutorial >table 控制单双行颜色以及鼠标hover颜色 table光棒_html/css_WEB-ITnose
table 控制单双行颜色以及鼠标hover颜色 table光棒_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:55:301338semak imbas
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
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：一款纯css实现的垂直时间线效果_html/css_WEB-ITnoseArtikel seterusnya：求解html与css的相关问题，附上代码_html/css_WEB-ITnose