快捷導(dǎo)航

JavaScript 表格高亮類的應(yīng)用[高級]

更新時(shí)間：2009年11月04日 14:42:58 作者：

比較高級的JavaScript表格高亮類的應(yīng)用，代碼中的Js可以摘出來單獨(dú)作為一個(gè)表格高亮的修飾類，使用很方便，可以控制表格某行、某列甚至是行列同時(shí)高亮顯示，運(yùn)行一下可以看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表格高亮</title>     <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>     <style type="text/css">         * {             font-size: 11px;             font-family: verdana, arial, sans-serif;         }                  table {             border: 1px solid #ccc;             margin: 0 auto;         }                  th {             background-color: #f7f7f7;         }                  td, th {             padding: 15px;             border: 1px solid #ccc;         }                  tr.alternate {             background-color: #efd;         }                  .bold {             font-weight: bold;         }                  .red {             color: red;             font-weight: bold;         }                  .blue {             background-color: blue;         }                  /* Used with crosshairs.js */         .hoverHilight {             background-color: #ffffc0;             cursor: pointer;         }                  .activeCellHilight {             background-color: #c0dbff;             color: blue;         }     </style>                </head> <body> <table id="crossTable">         <tr>             <th>&nbsp;</th>             <th>編號</th>             <th>姓名</th>             <th>地址</th>             <th>電話</th>         </tr>         <tr>             <td class="bold">1</td>             <td onmouseover="addHilight(this);" onmouseout="removeHilight(this);">a1</td>             <td>b1</td>             <td>c1</td>             <td>d1</td>                  </tr>         <tr class="alternate">             <td class="bold">2</td>             <td>a2</td>             <td>b2</td>             <td>c2</td>             <td>d2</td>                      </tr>         <tr>             <td class="bold">3</td>             <td>a3</td>             <td>b3</td>             <td>c3</td>             <td>d3</td>                  </tr>         <tr class="alternate">             <td class="bold">4</td>             <td>a4</td>             <td>b4</td>             <td>c4</td>             <td>d4</td>                  </tr>         <tr>             <td class="bold">5</td>             <td>a5</td>             <td>b5</td>             <td>c5</td>             <td>d5</td>                  </tr>      </table>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: