编程 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的对话框详解与参数

Mar 08 Javascript

一个刚完成的layout（拖动流畅，不受iframe影响）

Aug 17 Javascript

浅谈javascript的Array.prototype.slice.call

Aug 31 Javascript

JS中使用FormData上传文件、图片的方法

Aug 07 Javascript

js实现用户输入的小写字母自动转大写字母的方法

Jan 21 Javascript

react-native之ART绘图方法详解

Aug 08 Javascript

JS实现快递单打印功能【推荐】

Jun 21 Javascript

vue 指令之气泡提示效果的实现代码

Oct 18 Javascript

Vue组件的使用及个人理解与介绍

Feb 09 Javascript

JS前端知识点运算符优先级，URL编码与解码，String，Math，arguments操作整理总结

Jun 27 Javascript

vue的滚动条插件实现代码

Sep 07 Javascript

原生js实现3D轮播图

Mar 21 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