CSS + JS table row highlighting

programming web dev
1

I design our company’s website. If goto this page you’ll see i’ve implemented some Javascript and CSS to highlight the table row the mouse is hovering over in our pricing tables: http://www.motionflyers.co.uk/product.php?c=flyers

Is there a way to change the individual table CELL in a different highlight colour as well as keeping the row highlighted? Here’s the javascript:

function initRowHighlighting()
{
    if (!document.getElementsByTagName){ return; }
    
    var tables = document.getElementsByTagName('table');
    
    for(var i = 0; i < tables.length; i++)
    {
        var table = tables*;
        if(table.className && table.className.indexOf('highlightTable') >= 0)
        {
            //Make sure to use th tags for header row.
            attachRowMouseEvents(table.getElementsByTagName('tr'));
        }
    }
}

function attachRowMouseEvents(rows)
{
    for(var i = 0; i < rows.length; i++)
    {
        var row = rows*;
        if(i%2 == 0)
        {
            row.onmouseover =    function() 
                                { 
                                    this.setAttribute('oldClass', this.className);
                                    this.className = 'highlight';
                                };
            
            row.onmouseout =    function() 
                                { 
                                    this.className = this.getAttribute('oldClass');
                                };
        }
        else
        {
            row.onmouseover =    function() 
                                { 
                                    this.setAttribute('oldClass', this.className);
                                    this.className = 'highlightAlt';
                                };
            
            row.onmouseout =    function() 
                                { 
                                    this.className = this.getAttribute('oldClass');
                                };
        }
    }
}

//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
{    
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    } 
    else 
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

addLoadEvent(initRowHighlighting);