Changing ColGroup Class

[Meleagant]

All,

I have an HTML table where I implemented an excel like column locking feature. I was trying to improve performance by using the ColGroup/Col tags.

Web services return data which is then parsed by JavaScript where basically <TR/> tags are added to a table.

The problem I am running into is dynamically setting CSS ClassNames to the various <COL/> tags. If I look at the generated source of the page the ClassNames are successfully applied but the styles are not visible in the browser window.

Here is how I am trying to change a columns style by changing the attributes of the ColGroup tag. The second for loop is where I am trying to set styling attributes.

function freezeColGroups(colIdx, tableId) {

    window.status = 'Locking Columns...';

    var oParentTbl = $get(tableId);
    var oHdrTbl = oParentTbl.rows[0].cells[0].firstChild.firstChild;
    var oDtlTbl = oParentTbl.rows[1].cells[0].firstChild.firstChild;

    var oCell = {};
    var c = 0;
    oDtlTbl.lockedColIdx = colIdx;

    // Scroll Col 0 into view
    oHdrTbl.rows[0].cells[0].scrollIntoView(true);
    oDtlTbl.rows[0].cells[0].scrollIntoView(true);

    //Get ColGroup.
    var colGroups = oDtlTbl.firstChild;
    var colLen = colGroups.children.length;

    //Set Column Headers:  Freezing and Setting Padlock icon
    for (c = 0; c < colLen; c++) {
        oCell = oHdrTbl.rows[0].cells[c];
        if (c <= colIdx) {
            //This Works b/c I am changing the attributes of the CELL
            oCell.className = 'frozenColHdr tvHeader';
            oCell.style.backgroundColor = '#f0a0a0';
            SetPadLockIcon(oCell, colLocked);
        } else if (c <= oDtlTbl.maxLockIdx) {
            oCell.className = 'tvHeader';
            SetPadLockIcon(oCell, colUnLocked);
        } else {
            break;
        }
    }

    //Freeze detail rows
    for (c = 0; c < colLen; c++) {
        if (c <= colIdx) {
            //This No Work
            colGroups.children[c].className = 'frozenCol';

            //Neither does this
            colGroups.children[c].style.backgroundColor = '#f0a0a0';

        } else if (c <= oDtlTbl.maxLockIdx) {
            colGroups.children[c].className = '';
        } else {
            break;
        }
    }

    window.status = 'Done';
}

And here is how I am filling the html table with data:

function tblVolume_FillData(tableItems, oParentTbl, RowClick_Event, DblClick_Event) {
    window.status = 'Loading Data...';

    var rowItems = [];
    if (typeof (tableItems) === 'string') {
        rowItems = tableItems.split(recDelimiter);
    } else {
        rowItems = tableItems;
    }

    var oHdrTbl = oParentTbl.rows[0].cells[0].firstChild.firstChild;
    var oDtlTbl = oParentTbl.rows[1].cells[0].firstChild.firstChild;

    if (rowItems.length === 1) oDtlTbl.EOP = true;

    var h = 0;
    var hdrLen = oHdrTbl.rows[0].cells.length;
    var colGrp = document.createElement('ColGroup');
    var col = {};
    for (h = 0; h < hdrLen; h++) {
        col = document.createElement('Col');
        col.width = oHdrTbl.rows[0].cells[h].style.width;
        colGrp.appendChild(col);
    }

    /* ** Add ColGroup Tag before TBody tag ** */
    if (oDtlTbl.firstChild && (!oDtlTbl.firstChild.tagName !== 'COLGROUP')) oDtlTbl.insertBefore(colGrp, oDtlTbl.children[0]);

    /* ** SetUp Sort Image on Columns ** */
    SetColumnSortImages(oParentTbl);

    /* ** Populate the Table with Data ** */
    var cellItem = [];
    var oRow = {};
    var oCell = {};
    var i = 0;
    var j = 0;
    var numCols = 0;
    for (i = 0; i < rowItems.length; i++) {

        cellItem = rowItems[i].split(fldDelimiter);
        if (cellItem[0] === '') continue;

        oRow = document.createElement('TR');
        oRow.style.cursor = 'default';
        oRow.onmouseover = function () { SetNewColor(this); };
        oRow.onmouseout = function () { SetOldColor(this); };
        oRow.onclick = function () { RowClick_Event(this); };
        oRow.ondblclick = function () { DblClick_Event(this); };
        oRow.className = (i % 2) == 0 ? 'tvRow' : 'tvAltRow';

        numCols = cellItem.length;
        for (j = 0; j < numCols; j++) {
            oCell = document.createElement('TD');
            if (cellItem[j] === '') {
                oCell.innerText = ' ';
            } else {
                oCell.innerText = cellItem[j];
            }
            oCell.align = oHdrTbl.rows[0].cells[j].align;
            if (i === 0) oCell.style.width = oHdrTbl.rows[0].cells[j].style.width;

            if (j <= oDtlTbl.lockedColIdx) {
                oCell.className = 'frozenCol';
            } else if (j <= oDtlTbl.maxLockIdx) {
                oCell.className = '';
            }
            oRow.appendChild(oCell);
        }

        oDtlTbl.children[1].appendChild(oRow);

    }
    oDtlTbl.loaded = true;
    window.status = 'Done';
}

* Sine scientia ars nihil est
* Respondeat superior