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 相关文章推荐
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
一个取得文件扩展名的函数
2006/10/09 PHP
PHP 图片上传代码
2011/09/13 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
python学习必备知识汇总
2017/09/08 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
留学生求职信
2014/06/03 职场文书
中学生检讨书1000字
2014/10/28 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
MySQL时区造成时差问题
2022/04/13 MySQL