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 事件处理逻辑。
查看全文
相关阅读:
我为能准时下班而做的准备,以及由此的收获,同时总结下不足
用象棋的思维趣说IT人的职业发展和钱途
简历上如果出现过于高大上的项目,反而过犹不及:再论如何通过项目引出技术
用python的matplotlib和numpy库绘制股票K线均线的整合效果(含从网络接口爬取数据和验证交易策略代码)
如果当前没有拿得出手的简历,也别慌,努力的话最多两年情况就能改变
分析若干没面试机会和没体现实力的简历
IT人为了自己父母和家庭,更得注意自己的身体和心理健康
Spring Cloud系列文,Feign整合Ribbon和Hysrix
以互联网公司的经验告诉大家,架构师究竟比高级开发厉害在哪?
博客园是个大金矿,管理员不挖掘有些可惜:给博客园提一些双赢的建议
原文地址:https://www.cnblogs.com/RChen/p/230567.html
最新文章
vue cli4.0 快速搭建项目详解
JS创建函数的方法
JS优化常用片断
fullcalendar + qTip2显示事件详情
微信小程序——<scroll-view>滚动到最底部
微信小程序——音频播放器
微信小程序——获取当天的前一个月至后一个月
作为IT面试官,我如何考核计算机专业毕业生?作为培训班老师,我又如何提升他们?
从筛选简历和面试流程讲起,再给培训班出身的程序员一些建议
你多久更新一次简历,决定了你的收入多久能提升
热门文章
在没实践机会的前提下,如何跨越级别
以股票RSI指标为例,学习Python发送邮件功能(含RSI指标确定卖点策略)
有时间担心中年危机,还不如用忧虑的时间来提升自己——再论程序员该如何避免所谓的中年危机
IT人不仅要提升挣钱能力,更要拓展挣钱途径
博客园在升级的路上,不妨更自信些,同时说说我们可以为博客园做些什么
以预测股票涨跌案例入门基于SVM的机器学习
从国际象棋与象棋的走法差异,再趣说IT人提升能力和增收方式
从面试官的角度聊聊培训班对程序员的帮助,同时给培训班出身的程序员一些建议
穷不过三代,囧不过三个公司——程序员如何通过努力让自己看上去很光鲜
用python的matplotlib和numpy库绘制股票K线均线和成交量的整合效果(含量化验证交易策略代码)
Copyright © 2011-2022 走看看