JavaScript 表格高亮类的应用[高级]

2026-01-17 14:38:39 作者：用户投稿

<!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需再刷新一下页面才能执行]

联络方式：

4008905355

邮箱：9196886@qq.com

Q Q：9196886

微信二维码