JavaScript通過事件代理高亮顯示表格行的方法

2024-05-06 16:20:56

字體：大中小

來源：轉載

供稿：網(wǎng)友

這篇文章主要介紹了JavaScript通過事件代理高亮顯示表格行的方法,涉及javascript事件代理及頁面元素的操作技巧,需要的朋友可以參考下

本文實例講述了JavaScript通過事件代理高亮顯示表格行的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!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>



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