HTML 表格过滤和重排答案

【问题标题】：HTML Table Filtering and ReflowHTML 表格过滤和重排
【发布时间】：2012-05-30 12:31:44
【问题描述】：

我有一个非常大的 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");
      }
   }

});

【问题讨论】：

请显示您的循环遍历行的代码。也许我们可以优化它
也许我错了，但似乎你那里有一个无限循环..

标签： javascript html css ajax reflow

【解决方案1】：

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

使用table-layout:fixed 启用渐进式渲染
在 Firefox/Camino 中，在 about:config 中设置 html5.parser.enable=false
Optimize 表格标记
使用DOM methods 而不是jQuery

【讨论】：