javascript table美化鼠标滑动单元格变色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8">     <title>orbitz-like behavior for hovering over table cells</title> <sty1e type="text/css"> .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table    {border-collapse:collapse;} thead th {     font:bold 13px/18px georgia;     text-align:left;     background:#fff4c6;     color:#333;     padding:8px 16px 8px 8px;     border-right:1px solid #fff;     border-bottom:1px solid #fff; } thead th.null {background:#fff;} tbody th {     font:bold 12px/15px georgia;     text-align:left;     background:#fff9e1;     color:#333;     padding:8px;     border-bottom:1px solid #f3f0e4;     border-right:1px solid #fff; } tbody td {     font:normal 12px/15px georgia;     color:#333;     padding:8px;     border-right:1px solid #f3f0e4;     border-bottom:1px solid #f3f0e4; }  tbody td.on {background:green;}    thead th.on {background:red;} tbody th.on {background:red;} </style>  </head> <body>  <p>Final example with Javascript applied.  Hover over a table cell to see effects.  "View Source" and copy if you'd like to use.</p>  <table id="rockartists">     <thead>  <tr>      <th class="null"> </th>      <th class="stones">Rolling Stones</th>      <th class="u2">U2</th>      <th class="crue">Mötley Crüe</th>  </tr>     </thead>     <tbody>  <tr>      <th>Lead Vocals</th>      <td class="stones">Mick Jagger</td>      <td class="u2">Bono</td>      <td class="crue">Vince Neil</td>  </tr>  <tr>      <th>Lead Guitar</th>      <td class="stones">Keith Richards</td>      <td class="u2">The Edge</td>      <td class="crue">Mick Mars</td>  </tr>  <tr>      <th>Bass Guitar</th>      <td class="stones">Ron Wood</td>      <td class="u2">Adam Clayton</td>      <td class="crue">Nikkie Sixx</td>  </tr>  <tr>      <th>Drums</th>      <td class="stones">Charlie Watts</td>      <td class="u2">Larry Mullen, Jr.</td>      <td class="crue">Tommy Lee</td>  </tr>     </tbody> </table> </body> </html> 本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=20

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

javascript table美化鼠标滑动单元格变色

JavaScript相关栏目本月热门文章