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 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 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 静态变量与自定义常量的使用方法
2010/01/26 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
解析php类的注册与自动加载
2013/07/05 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
详解Bootstrap插件
2016/04/25 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
领导的自我鉴定
2013/12/28 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
共产党员承诺书
2014/03/25 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
给老婆的检讨书
2015/01/27 职场文书
骨干教师个人总结
2015/02/11 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
tomcat下部署jenkins的方法
2022/05/06 Servers