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

分类：js_JavaScript 答疑 - 常见问题 · 发布时间：2021-11-24 11:35 · 阅读：9801

比较高级的JavaScript表格高亮类的应用，代码中的Js可以摘出来单独作为一个表格高亮的修饰类，使用很方便，可以控制表格某行、某列甚至是行列同时高亮显示，运行一下可以看效果。

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

标签：

JavaScript 表格高亮类

0133技术栈

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

相关文章

JS实现谷歌浏览器插件拷贝语音功能详解

连接文字不停变色

短信提示使用特效

HTML5 实现的一个俄罗斯方块实例代码

炽热的文字

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

相关文章

JS实现谷歌浏览器插件拷贝语音功能详解

连接文字不停变色

短信提示使用 特效

HTML5 实现的一个俄罗斯方块实例代码

炽热的文字

短信提示使用特效