table 控制單雙行顏色以及鼠標hover顏色 table光棒
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>
效果圖：
javascript
附件下載：http://files.cnblogs.com/Orange-C/TableDemo.zip 出處 http://www.cnblogs.com/Orange-C/p/4049832.html css
相關文章
- 1. Processing 練習(4) - 鼠標控制顏色
- 2. table縱列加顏色
- 3. PowerDesigner 修改table的顏色
- 4. 修改element-ui的table 在鼠標懸停hover時的高亮顏色
- 5. input光標顏色
- 6. 鼠標點擊改變單元格顏色或點擊改變行顏色
- 7. element-ui 中 table 鼠標懸停時背景顏色修改
- 8. JQuery - 鼠標通過table的行變色
- 9. css樣式設置鼠標選中後字體顏色以及背景顏色
- 10. wenzhixin bootstrap-table 點擊table單元格改變顏色
- 更多相關文章...
- • ionic 顏色 - ionic 教程
- • PHP imagecolorclosest - 取得與指定的顏色最接近的顏色的索引值 - PHP參考手冊
- • 漫談MySQL的鎖機制
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
