我有大约30列的html表,大约10到500行.我想按一下按钮来显示/隐藏一组列.
我尝试了两种方法
>遍历表格,并在TH和TD上执行.show()或.hide().
>遍历表的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');
}
}
});
}
解决方法
一些建议：
>在构建表时,将c1类(如col1,col2,col3等)添加到标题和数据单元格中.然后你可以做$(“td.col1”).hide();隐藏相应的列.它比第n个子选择器快.
>在IE和Firefox中,您可以设置可见性：折叠到col元素以折叠整个列.这会快得多.遗憾的是,Webkit浏览器http://www.quirksmode.org/css/columns.html不支持.您可以根据浏览器分支代码,以便至少在IE和Firefox中快速实现.>如果您的表具有固定的表格布局：它可以显着提高性能,因为您的浏览器不必像每次触摸表格那样在自动模式下继续计算列的宽度.>考虑从DOM树中删除表(通过.remove()),执行批量显示/隐藏操作并将其重新插入.这是一般规则,只要您想在DOM树上执行批量操作.