表格行高亮显示实现为一个 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 事件处理逻辑。
