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

更新時(shí)間：2015年05月27日 17:18:24 作者：不吃皮蛋

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

本文實(shí)例講述了JavaScript通過(guò)事件代理高亮顯示表格行的方法。分享給大家供大家參考。具體實(shí)現(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>
<!-- 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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

制作微信小程序的小白簡(jiǎn)單入門教程
這篇文章主要介紹了制作微信小程序的小白簡(jiǎn)單入門教程。本文就是小程序?qū)W習(xí)筆記，整理成教程的形式，希望對(duì)于初學(xué)者有用。需要學(xué)會(huì)的主要知識(shí)點(diǎn)都會(huì)講到，目標(biāo)是你讀完這個(gè)教程，就能學(xué)會(huì)怎么寫小程序。
2022-12-12
JavaScript中setInterval的用法總結(jié)
這篇文章主要是對(duì)JavaScript中setInterval的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
js正則表達(dá)式簡(jiǎn)單校驗(yàn)方法
在本篇文章里小編給大家整理了一篇關(guān)于js正則表達(dá)式簡(jiǎn)單校驗(yàn)方法，有需要的朋友們可以參考下。
2021-01-01
iscroll實(shí)現(xiàn)下拉刷新功能
這篇文章主要介紹了iscroll實(shí)現(xiàn)下拉刷新功能的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
toString.call()通用的判斷數(shù)據(jù)類型方法示例
這篇文章主要給大家介紹了關(guān)于toString.call()通用的判斷數(shù)據(jù)類型方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
處理Axios返回Promise對(duì)象的幾種常見方式
Axios返回的是Promise對(duì)象,這意味著可以使用Promise的.then()、.catch()和.finally()方法來(lái)處理異步操作的結(jié)果,本文詳細(xì)介紹了處理Axios返回Promise對(duì)象的幾種常見方式,需要的朋友可以參考下
2024-09-09
JsEasy簡(jiǎn)介 JsEasy是什么?與下載
JsEasy簡(jiǎn)介 JsEasy是什么?與下載...
2007-03-03
JavaScript訪問(wèn)CSS屬性的幾種方式介紹
要通過(guò)元素訪問(wèn)樣式表，那么就應(yīng)該先確定是哪個(gè)元素。直接訪問(wèn)樣式表在該樣式塊里找相應(yīng)的樣式規(guī)則，最后在該樣式規(guī)則里找相應(yīng)的樣式
2014-07-07
基于JavaScript實(shí)現(xiàn)圖片放大鏡功能
在一些電商網(wǎng)站上，經(jīng)?？吹接猩唐穲D片被放大查看的功能，所以本文將使用前端技術(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片放大鏡功能，希望能給大家?guī)?lái)一定的幫助
2023-06-06
用Javascript輕松制作一套簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
用Javascript輕松制作一套簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)...
2006-12-12