CodingForums.com - View Single Post

AndrewGSW · 01-09-2013, 07:31 PM

I have the following code but some might consider it a little over-complicated:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Highlight Rows On Click</title>
<style type="text/css">
    table {
        background-color: lightgreen;
    }
    #third {
        background-color: yellow;
    }
</style>
</head>
<body>
<!-- Demonstrating "Event Delegation" to highlight table' rows 
    on click.
    Arguments can be passed via the delegate. -->
<table id="thetable" summary="highlight on click demo">
    <tr><th>Header</th><th>.. click does nothing</th></tr>
    <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>
    <tr><td>Hey, a fifth!</td><td>.. one more</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 highlightRow(obj, args) {
    if (highlightRow.previous) 
        highlightRow.previous.parentNode.style.background = highlightRow.prevColour;
    highlightRow.previous = obj;
    highlightRow.prevColour = obj.parentNode.style.backgroundColor;
    obj.parentNode.style.backgroundColor = args.colour;
}

function init() {
    delegateEvent(document.getElementById('thetable'), 'td', 'click',
                  highlightRow, {'colour': '#FDFDFD'});
}
addEvent(window, 'load', init);
</script>
</body>
</html>

But as you've included no JavaScript at all on your fiddle, this might not mean too much to you.