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