HTML表格过滤和回流

我有一个非常大的HTML表，900 +行。根据过滤器的值，我可以通过遍历行和隐藏/显示行来启用筛选。HTML表格过滤和回流

这是问题所在。当我隐藏/显示500多行时，页面在浏览器忙于回流时完全无响应。我曾尝试在过滤之前隐藏表格，克隆表格，然后替换表格等。但是，无响应仍然是一个问题，因为它阻止了我在浏览器重画时使用“动画”加载图像。

分页不是一个选项，也不是惰性滚动。

这里是循环：

var rows = null; 
$("#mavis-filters").find("input:checkbox").on("click", function() { 
    var id, i;  
    if (!rows) { 
     rows = document.getElementById("taskOverview").querySelectorAll("tr"); 
    } 
    id = this.id; 
    i = rows.length; 

    while (i--) { 
     var row = rows[i]; 
     if (row.dataset.project === id) { 
     row.classList.toggle("row-hidden"); 
     } 
    } 

});

来源

2012-05-23 kylehyde215

请显示您的代码循环行。也许我们可以优化它 – lbstr

也许我错了，但似乎你有一个无限循环.. – Daedalus

使用渐进式渲染来解决此问题。以下是如何在每个浏览器应用它：

使用table-layout:fixed使渐进式渲染
在Firefox /卡米诺，在about:config
Optimize表格标记
使用DOM methods而不是jQuery的

html5.parser.enable=false

来源

2012-09-25 18:40:26

HTML表格过滤和回流

回答

相关问题