CodingForums.com - View Single Post

AndrewGSW · 09-17-2012, 09:33 PM

Below is an expanded version that also passes arguments to the delegated event:

It will highlight rows as you mouseover them using a supplied colour argument, also (optionally) displaying the row number ("Row 1", etc.). When the mouse moves out the previous background colour is re-instated and the temporary title ("Row 1", etc.) is removed.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Highlight Rows</title>
<style type="text/css">
    table {
        background-color: lightgreen;
    }
</style>
<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);
        };
    else
        addEvent = function (elem, eventType, func) {
            elem['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 && args.over === true) {
        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 = obj.prevColour;
        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>

</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 style="background-color: yellow;"><td>A third</td><td>.. no another</td></tr>
    <tr><td>Fourth for luck</td><td>.. no another</td></tr>
</table>


</body>
</html>

If the background colours were set using a stylesheet, rather than inline, then it would not be necessary to store the 'prevColour': setting the colour to "" would set the rows back to their original colours.