jQuery show/hide column on big table performance

Question

I have html table with about 30 columns and somewhere between 10 to 500 ish rows. I would like to show/hide a set of columns o a button click.

I have tried 2 approaches

1. iterate through table's thead th and do .show() or .hide() on the TH and TD.
2. iterate through table's thead th and change class to show/hide the TH and TD.

the function is implemented as following snippet. However, the performance is not that great. Show/Hide say 20 columns takes about 5~10 seconds on maybe 80~120 rows of data.

i am just wondering if there is anything we can do to make it go faster.

function ToggleHeadVisibility(showHide) {

    var index = 0;

    $('#' + gridViewName + ' thead th').each(function(index) {
        index++;
        if (showHide == "SHOW") {
            /*
            $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show();
            $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show();
            */
            $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide');
            $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide');
        } else if (showHide = "HIDE") {
            /*
            //if (showColumnArray.has($(this).get(0).innerHTML)) {
            if (showColumnArray.has($(this).attr('title'))) {
            $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show();
            $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show();
            }
            else {
            $('#' + gridViewName + ' th:nth-child(' + (index) + ')').hide();
            $('#' + gridViewName + ' td:nth-child(' + (index) + ')').hide();
            }
            */
            if (showColumnArray.has($(this).attr('title'))) {
                $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide');
                $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide');
            } else {
                $('#' + gridViewName + ' th:nth-child(' + (index) + ')').addClass('columnHide');
                $('#' + gridViewName + ' td:nth-child(' + (index) + ')').addClass('columnHide');
            }

        }
    });
}

Answer 1

Some suggestions:

1. While building a table, add css classes like col1, col2, col3 etc. to header and data cells. Then you could just do $("td.col1").hide(); to hide the respective column. It is faster than the n-th child selector.

2. In IE and Firefox, you could set a visibility: collapse to a col element to collapse the whole column. This will be much faster. Unfortunately not supported in Webkit browsers http://www.quirksmode.org/css/columns.html. You could branch your code based on browser so that it is fast at least in IE and Firefox.

3. If your table has a table-layout: fixed, it may significantly improve performance because your browser doesn't have to keep calculating the widths of columns every time you touch the table as in the auto mode.

4. Consider removing the table from DOM tree (via .remove()), do the bulk show/hide operation and insert it back in. This is a general rule whenever you want to do bulk operation on DOM tree.

Answer 2

Evidently, this alternative is a little snappier for showing and hiding elements:

.css({'display':'none'}) & .css({'display':'block'});

http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

But I suspect your real problem is that loop.