javascript - 在 javascript 中隐藏和显示表格所有行的最快方法是什么？

Question

我正在构建一个过滤器来查询我们的 html 表(10k+ 行)。我最初的想法是先隐藏所有 行，然后取消隐藏与特定查询匹配的行。如果删除过滤器，则显示所有行。

这是编写隐藏/显示所有行函数的最佳方式吗？

// optimize this!
this.hideAllRows = function() {
    nodes = document.getElementById('table_body').children
    for(var i=0, i_max=nodes.length; i<i_max; i++) {
        nodes[i].style.display="none"
    }
}

// optimize this!
this.showAllRows = function() {
    nodes = document.getElementById('table_body').children
    for(var i=0, i_max=nodes.length; i<i_max; i++) {
        nodes[i].style.display=""
    }
}

谢谢!

Answer 1

一种解决方案是实现分页或“无限”滚动功能。这将消除同时呈现 10k dom 元素的需要。您可以在用户滚动时分批呈现它们，或者将它们分块放入页面中。

或者，您可以尝试将表格从 dom 中拉出，隐藏行，然后重新插入。这将防止不必要的回流/油漆/等。