<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, '#eeeeee');
var hilighter2 = new TableRowHilighter(document.getElementById('table2'), 0, 'lightsteelblue');
var hilighter3 = new TableRowHilighter(document.getElementById('table3'), 2);
</script>
</HTML>
posted on 2006-04-03 14:34
汪杰 阅读(173)
评论(0) 编辑 收藏 引用 所属分类:
javascript 、
hengxing网站js