jQuery显示/隐藏大表性能列

Question

我有大约30列的html表,大约10到500行.我想显示/隐藏按钮单击的一组列.

我尝试了两种方法

1. 迭代表的thead th并在TH和TD上执行.show()或.hide().
2. 迭代表的thead th并更改类以显示/隐藏TH和TD.

该函数实现为以下代码段.但是,性能并不是那么好.显示/隐藏说20列可能需要大约5~10秒,可能有80~120行数据.

我只是想知道我们能做些什么来让它变得更快.

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

一些建议:

1. 构建表时,将col1, col2, col3标题类等添加到标题和数据单元格中.然后你可以$("td.col1").hide();隐藏相应的列.它比第n个子选择器快.

2. 在IE和Firefox中,您可以设置visibility: collapse一个col元素来折叠整个列.这会快得多.遗憾的是,Webkit浏览器http://www.quirksmode.org/css/columns.html不支持.您可以根据浏览器分支代码,这样至少在IE和Firefox中它是快速的.

3. 如果您的表有一个table-layout: fixed,它可以显着提高性能,因为您的浏览器不必像每次触摸表一样计算列的宽度,就像在自动模式下一样.

4. 考虑从DOM树(via .remove())中删除表,执行批量显示/隐藏操作并将其重新插入.这是一般规则,只要您想在DOM树上执行批量操作.