zoukankan
html css js c++ java
表格行高亮显示实现为一个 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 事件处理逻辑。
查看全文
相关阅读:
Linux下源码安装Kong网关
nodejs.cn-Node.js-入门教程:Node.js 从命令行接收参数
nodejs.cn-Node.js-入门教程:如何使用 Node.js REPL
nodejs.cn-Node.js-入门教程:如何从 Node.js 读取环境变量
nodejs.cn-Node.js-入门教程:如何从 Node.js 程序退出
nodejs.cn-Node.js-入门教程:从命令行运行 Node.js 脚本
nodejs.cn-Node.js-入门教程:V8 JavaScript 引擎
nodejs.cn-Node.js-简单介绍:Node.js 与浏览器的区别
nodejs.cn-Node.js-简单介绍:使用 Node.js 需要了解多少 JavaScript
nodejs.cn-Node.js-简单介绍:如何安装 Node.js
原文地址:https://www.cnblogs.com/RChen/p/230567.html
最新文章
Advanced Installer之设置运行环境
MapGIS格式转ArcGIS方法
利用LayoutControl动态创建参数界面
ffmpeg 结合 ASS字幕制作+特效制作
[PHP版]制作视频字幕 等其他 GIF 转载
视频字幕文件 SSA、ASS 参数-攻略
如何高效工作
FFmpeg 添加 提取mkv视频字幕
ffmpeg 处理字幕
docker批量删除容器、镜像
热门文章
Windows 10 将 Docker Desktop for Windows(WSL 2 方式)文件存储移出系统盘放置到其它目录
Docker容器进入的4种方式
Servlet解决IE下载的文件中中文乱码问题
全网最全高清连环画合集(pdf)[收藏]
正确安装 《mathcad15破解版 v15.0.0.436简体中文版 》方法
WampServer3.2.0下载安装教程详解版
沪教版牛津英语小学教材电脑点读书
WordPress忘记密码找回登录密码的四种行之有效的方法
vs code 调试时查看数组全部元素
打印 每一年度的日历及该日历每一周在该年度中属于第几周
Copyright © 2011-2022 走看看