表格行高亮显示实现为一个 js 类
<HTML><HEAD><TITLE></TITLE><script language="javascript">/////////////////////////////////////////////////////////////////////////////////// 功能：这个类使得被附加的表格可以支持行点击高亮// 参数：// tbl: 要附加样式的 table.// selectedRowIndex: 初始高亮的行的索引(从 0 开始). 此参数可省。// hilightColor: 高亮颜色。可省（默认为绿色）//// Author: Neil Chen// Date: 2005-09-05/////////////////////////////////////////////////////////////////////////////////function TableRowHilighter(tbl, selectedRowIndex, hilightColor) { this.currentRow = null; this.hilightColor = hilightColor ? hilightColor : 'green'; if (selectedRowIndex != null && selectedRowIndex >= 0 && selectedRowIndex < tbl.rows.length) { this.currentRow = tbl.rows[selectedRowIndex]; tbl.rows[selectedRowIndex].runtimeStyle.backgroundColor = this.hilightColor; } var _this = this; tbl.attachEvent("onclick", table_onclick); function table_onclick() { var e = event.srcElement; if (e.tagName == 'TD') e = e.parentElement; if (e.tagName != 'TR') return; if (e == _this.currentRow) return; if (_this.currentRow) _this.currentRow.runtimeStyle.backgroundColor = ''; e.runtimeStyle.backgroundColor = _this.hilightColor; _this.currentRow = e; }}</script></HEAD><BODY><table id="table1" border="1" cellspacing="0" cellpadding="5"> <tr> <td onclick="alert('a');">a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr></table><br><table id="table2" border="1" cellspacing="0" cellpadding="5"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr></table><br><table id="table3" border="1" cellspacing="0" cellpadding="5"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr></table></BODY><script>// 调用范例var hilighter1 = new TableRowHilighter(document.getElementById('table1'), 1, 'yellow');var hilighter2 = new TableRowHilighter(document.getElementById('table2'), 0, 'lightsteelblue');var hilighter3 = new TableRowHilighter(document.getElementById('table3'), 2);</script></HTML>其中行点击的事件处理用的是 attachEvent 方法，因此不支持 IE 5.5 以下的浏览器，以及非 IE 浏览器。但有一个好处就是该高亮功能不影响 HTML 元素中原有的 onclick 事件处理逻辑。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？