编程 Javascript

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程序设计有所帮助。

- Author -

不吃皮蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript下的keyCode键码值表

Apr 10 Javascript

jQuery 自定义函数写法分享

Mar 30 Javascript

jQuery中filter()方法用法实例

Jan 06 Javascript

在JavaScript中操作数组之map()方法的使用

Jun 09 Javascript

bootstrap提示标签、提示框实现代码

Dec 28 Javascript

Canvas + JavaScript 制作图片粒子效果

Feb 08 Javascript

JS传播事件、取消事件默认行为、阻止事件传播详解

Aug 14 Javascript

vue2中,根据list的id进入对应的详情页并修改title方法

Aug 24 Javascript

浅谈webpack4.x 入门(一篇足矣)

Sep 05 Javascript

JS如何在不同平台实现多语言方式

Jul 16 Javascript

通过实例解析js可枚举属性与不可枚举属性

Dec 02 Javascript

vue集成一个支持图片缩放拖拽的富文本编辑器

Jan 29 Vue.js

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