page 3 of 3 Table Column Rollover

This example takes a different tack to achieve the goal. The change is applied to each cell in a column instead of the group tag. This is both more reliable across different browsers and more useful in achieving special effects where each cell is not the same but styled depending on some property of the cell.

The highlight is achieved by stepping throught the rows and changing the class of the cell that is in the target column.

Try it! Run your mouse over the table and see the cell colors change.

The CSS

            table {
                margin: 0;
                border: 5px outset #099;
                border-spacing: 0;
                width: auto;
                background-image: none;
            }
            th {
                border: 1px inset #fff;
                padding: 4px;
                background-color: #00c;
                color: #fff;
            }
            td {
                border: 1px inset #fff;
                padding: 4px;
                background-color: #066;
                color: #fff;
            }
            .hlt {
                background-color: yellow;
                color: black;
            }

The JavaScript

Let's take a look at the JavaScript. As you can see the function mouse_event isn't very different than the one on the previous page. The changes are highlighted.

    function mouse_event (e) {
        var e = e ||  window.event;
        var obj = e.srcElement || e.target;
        var tname = (obj.nodeType == 1) ? obj.tagName.toLowerCase() : '';
        while(tname != "tr" && tname !="table"){
                obj= obj.parentNode || obj.parentElement;
                tname = obj.tagName.toLowerCase();
        }
        if (tn == "tr") {
            var newClass;
            switch (e.type) {
            case 'mouseout':
                newClass = '';
                break;
            case 'mouseover':
                newClass = 'hlt';
                break;
            }
            var cellIdx = getCellIndex(obj);
            obj= obj.parentNode || obj.parentElement; //row
            obj= obj.parentNode || obj.parentElement; //tbody
            for (var i = 0; i < obj.rows.length; i++) {
                    obj.rows[i].cells[cellIdx].className = newClass;
            }
        }
    }//eof mouse_event

If anything, this code is simpler than the code on the preceding page because all the cells get the same treatment and the headers are not highlighted. The switch statement assigns the needed class name to a variable.

The for loop walks down the TBODY's rows collection. For each row the cell in the column is accessed through the cells collection, which is an array of pointers to each cell (TD or TH) in the row.