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

table 控制单双行颜色以及鼠标hover颜色 table光棒_html/css_WEB-ITnose
WBOY
Libérer： 2016-06-24 11:55:30
original
1292 Les gens l'ont consulté
  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>
Copier après la connexion
效果图：
附件下载：http://files.cnblogs.com/Orange-C/TableDemo.zip 出处 http://www.cnblogs.com/Orange-C/p/4049832.html