表格行高亮显示实现为一个 js 类

<HTML>

<HEAD>

<TITLE></TITLE>
表格行高亮显示实现为一个 js 类

///////////////////////////////////////////////////////////////////////////////
表格行高亮显示实现为一个 js 类

// 功能：这个类使得被附加的表格可以支持行点击高亮
表格行高亮显示实现为一个 js 类

// 参数：

// tbl: 要附加样式的 table.
表格行高亮显示实现为一个 js 类

// selectedRowIndex: 初始高亮的行的索引(从 0 开始). 此参数可省。
表格行高亮显示实现为一个 js 类

// hilightColor: 高亮颜色。可省（默认为绿色）
表格行高亮显示实现为一个 js 类

// Author: Neil Chen
表格行高亮显示实现为一个 js 类

// Date: 2005-09-05
表格行高亮显示实现为一个 js 类

///////////////////////////////////////////////////////////////////////////////
表格行高亮显示实现为一个 js 类

function TableRowHilighter(tbl, selectedRowIndex, hilightColor) {
表格行高亮显示实现为一个 js 类

this.currentRow = null;
表格行高亮显示实现为一个 js 类

this.hilightColor = hilightColor ? hilightColor : 'green';
表格行高亮显示实现为一个 js 类

if (selectedRowIndex != null
表格行高亮显示实现为一个 js 类

&& selectedRowIndex >= 0
表格行高亮显示实现为一个 js 类

&& selectedRowIndex < tbl.rows.length)
表格行高亮显示实现为一个 js 类

{

this.currentRow = tbl.rows[selectedRowIndex];
表格行高亮显示实现为一个 js 类

tbl.rows[selectedRowIndex].runtimeStyle.backgroundColor = this.hilightColor;
表格行高亮显示实现为一个 js 类

}

var _this = this;
表格行高亮显示实现为一个 js 类

tbl.attachEvent("onclick", table_onclick);
表格行高亮显示实现为一个 js 类

function table_onclick() {
表格行高亮显示实现为一个 js 类

var e = event.srcElement;
表格行高亮显示实现为一个 js 类

if (e.tagName == 'TD')
表格行高亮显示实现为一个 js 类

e = e.parentElement;
表格行高亮显示实现为一个 js 类

if (e.tagName != 'TR') return;
表格行高亮显示实现为一个 js 类

if (e == _this.currentRow) return;
表格行高亮显示实现为一个 js 类

if (_this.currentRow)
表格行高亮显示实现为一个 js 类

_this.currentRow.runtimeStyle.backgroundColor = '';
表格行高亮显示实现为一个 js 类

e.runtimeStyle.backgroundColor = _this.hilightColor;
表格行高亮显示实现为一个 js 类

_this.currentRow = e;
表格行高亮显示实现为一个 js 类

}

</script>

</HEAD>

<BODY>

<table id="table1" border="1" cellspacing="0" cellpadding="5">
表格行高亮显示实现为一个 js 类

<tr>

<td onclick="alert('a');">a</td>
表格行高亮显示实现为一个 js 类

<td>b</td>
表格行高亮显示实现为一个 js 类

<td>c</td>
表格行高亮显示实现为一个 js 类

</tr>

<tr>

<td>d</td>
表格行高亮显示实现为一个 js 类

<td>e</td>
表格行高亮显示实现为一个 js 类

<td>f</td>
表格行高亮显示实现为一个 js 类

</tr>

<tr>

<td>g</td>
表格行高亮显示实现为一个 js 类

<td>h</td>
表格行高亮显示实现为一个 js 类

<td>i</td>
表格行高亮显示实现为一个 js 类

</tr>

</table>

<br>

<table id="table2" border="1" cellspacing="0" cellpadding="5">
表格行高亮显示实现为一个 js 类

<tr>

<td>a</td>
表格行高亮显示实现为一个 js 类

<td>b</td>
表格行高亮显示实现为一个 js 类

<td>c</td>
表格行高亮显示实现为一个 js 类

</tr>

<tr>

<td>d</td>
表格行高亮显示实现为一个 js 类

<td>e</td>
表格行高亮显示实现为一个 js 类

<td>f</td>
表格行高亮显示实现为一个 js 类

</tr>

<tr>

<td>g</td>
表格行高亮显示实现为一个 js 类

<td>h</td>
表格行高亮显示实现为一个 js 类

<td>i</td>
表格行高亮显示实现为一个 js 类

</tr>

</table>

<br>

<table id="table3" border="1" cellspacing="0" cellpadding="5">
表格行高亮显示实现为一个 js 类

<tr>

<td>a</td>
表格行高亮显示实现为一个 js 类

<td>b</td>
表格行高亮显示实现为一个 js 类

<td>c</td>
表格行高亮显示实现为一个 js 类

</tr>

<tr>

<td>d</td>
表格行高亮显示实现为一个 js 类

<td>e</td>
表格行高亮显示实现为一个 js 类

<td>f</td>
表格行高亮显示实现为一个 js 类

</tr>

<tr>

<td>g</td>
表格行高亮显示实现为一个 js 类

<td>h</td>
表格行高亮显示实现为一个 js 类

<td>i</td>
表格行高亮显示实现为一个 js 类

</tr>

</table>

</BODY>

// 调用范例

var hilighter1 = new TableRowHilighter(document.getElementById('table1'), 1, 'yellow');
表格行高亮显示实现为一个 js 类

var hilighter2 = new TableRowHilighter(document.getElementById('table2'), 0, 'lightsteelblue');
表格行高亮显示实现为一个 js 类

var hilighter3 = new TableRowHilighter(document.getElementById('table3'), 2);
表格行高亮显示实现为一个 js 类

</script>

</HTML>

其中行点击的事件处理用的是 attachEvent 方法，因此不支持 IE 5.5 以下的浏览器，以及非 IE 浏览器。但有一个好处就是该高亮功能不影响 HTML 元素中原有的 onclick 事件处理逻辑。