<! 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.tar get | 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. color; 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, {'color': 'lightblue', 'over': true, 'Index': true }); DelegateEvent (document. getElementById ('thetable'), 'td ', 'mouseout ', HighlightRows, {'over': false }); } AddEvent (window, 'load', init ); </Script> </Body> </Html> |