Heim > Web-Frontend > HTML-Tutorial > table 控制单双行颜色以及鼠标hover颜色 table光棒_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:55:30
Original
1320 Leute haben es durchsucht

  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>
Nach dem Login kopieren

效果图:

附件下载:http://files.cnblogs.com/Orange-C/TableDemo.zip 出处 http://www.cnblogs.com/Orange-C/p/4049832.html                       

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage