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

最新推荐文章于 2021-04-11 18:42:30 发布

weixin_30906701

最新推荐文章于 2021-04-11 18:42:30 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/RChen/archive/2005/09/05/230567.html

此博客为转载内容，转载自https://www.cnblogs.com/RChen/archive/2005/09/05/230567.html ，涉及JavaScript相关知识。

<HTML>

<HEAD>

///////////////////////////////////////////////////////////////////////////////

// 功能：这个类使得被附加的表格可以支持行点击高亮

// 参数：

// 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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</BODY>

// 调用范例

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 事件处理逻辑。

转载于:https://www.cnblogs.com/RChen/archive/2005/09/05/230567.html