1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68-69 |
<! 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.backgroundColo R 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> |