JavaScript通过事件代理高亮显示表格行的方法


Posted in Javascript onMay 27, 2015

本文实例讲述了JavaScript通过事件代理高亮显示表格行的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highlight Rows</title>
<style type="text/css">
 table {
 background-color: lightgreen;
 }
 #third {
 background-color: yellow;
 }
</style>
</head>
<body>
<!-- Demonstrating "Event Delegation" to highlight table' rows 
 on mouseover. 
 Arguments can be passed via the delegate. 
My site:andrew.dx.am -->
<table id="thetable" summary="highlight demo">
 <tr><td>Just one</td><td>.. no another</td></tr>
 <tr><td>Second</td><td>.. no another</td></tr>
 <tr id="third"><td>A third</td><td>.. no another</td></tr>
 <tr><td>Fourth for luck</td><td>.. no another</td></tr>
</table>
<script type="text/javascript">
var addEvent = function (elem, eventType, func) {
 if ( elem.addEventListener )
 addEvent = function (elem, eventType, func) {
  elem.addEventListener(eventType, func, false);
 };
 else if ( elem.attachEvent )
 addEvent = function (elem, eventType, func) {
  elem.attachEvent('on' + eventType, func);
 };
 addEvent(elem, eventType, func);
};
var delegateEvent = function (elem, childElems, eventType, func, args) {
 addEvent(elem, eventType, function (e) {
 var evt = e || window.event;
 var elem = evt.target || evt.srcElement;
 if ( elem.nodeName.toLowerCase() == childElems.toLowerCase() ) {
  func(elem, args);
 }
 });
};
function highlightRows(obj, args) {
 if (args && args.over) {
 obj.prevColour = obj.parentNode.style.backgroundColor;
 obj.parentNode.style.backgroundColor = args.colour;
 if (args.index && obj.title == "")
  obj.title = "Row " + obj.parentNode.rowIndex;
 } else {
 obj.parentNode.style.backgroundColor = "";
 if (obj.title.indexOf("Row ") + 1)
  obj.title = "";
 }
}
function init() {
 delegateEvent(document.getElementById('thetable'), 'td', 'mouseover',
   highlightRows, {'colour': 'lightblue', 'over': true, 
   'index': true});
 delegateEvent(document.getElementById('thetable'), 'td', 'mouseout',
   highlightRows, {'over': false});
}
addEvent(window, 'load', init);
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
javascript数组去重小结
Mar 07 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
jquery预加载图片的方法
May 27 #Javascript
jQuery仿gmail实现fixed布局的方法
May 27 #Javascript
js实现键盘Enter键提交表单的方法
May 27 #Javascript
js实现简单锁屏功能实例
May 27 #Javascript
JS实现简单路由器功能的方法
May 27 #Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 #Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 #Javascript
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php 常用类整理
2009/12/23 PHP
PHP基础知识回顾
2012/08/16 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python解析xml文件实例分享
2013/12/04 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
颂军魂爱军营演讲稿
2014/09/13 职场文书
2015年小学开学寄语
2015/02/27 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏