Javascript-隐藏表行非常慢

新手问题：

我有一个巨大的HTML表，30000行，比如说，每行有一个类名（总共有10个）。我需要一个JS函数，它过滤（显示/隐藏）具有特定类的所有行

显示它们（删除属性）相对较快，但隐藏它们（设置属性）需要很长时间

这是表格的外观：

<tr class="a" show="off">...</tr>
<tr class="b" show="off">...</tr>
<tr class="c" show="off">...</tr>
<tr class="a" show="off">...</tr>
<tr class="b" show="off">...</tr>
<tr class="c" show="off">...</tr>

我的JS代码将删除show属性来显示它们

function showTr (c){
    var rows = document.getElementsByClassName(c)
    for(var i = 0; i < a.length; ++i) {
        rows[i].removeAttribute("show")
    }
}

函数showTr（c）{
var rows=document.getElementsByClassName（c）
对于（变量i=0；i

和代码来隐藏它们

function hideTr (c){
    var rows = document.getElementsByClassName(c)
    for(var i = 0; i < a.length; ++i) {
        rows[i].setAttribute("show","off")
    }
}

函数hideTr（c）{
var rows=document.getElementsByClassName（c）
对于（变量i=0；i

---

我很抱歉，如果有一个话题涉及到这一点，我没有发现任何东西。谢谢您的建议。

您可以构建一个css并将其注入

中，让浏览器来处理其余部分，而不是对每个DOM节点进行变异

const-toggleButton=document.querySelector（“[data-toggle]”）；
toggleButton.addEventListener（'click'，toggleRows）；
函数toggleRows（）{
const STYLE_ID='表行隐藏'；
const prevStyle=document.getElementById（样式ID）；
如果（prevStyle）{
prevStyle.parentNode.removeChild（prevStyle）；
}否则{
常量css=`
.隐蔽的{
显示：无；
}
`;
const style=document.createElement（'style'）；
style.id=style\u id；
style.innerHTML=css；
document.head.appendChild（样式）；
}
}

td{
边框：1px实心；
边界塌陷：塌陷；
填充：0.25rem；
}

切换
A.
B
C
E
F
G
H
我

您可以构建一个css并将其注入

中，然后让浏览器处理其余部分，而不是对每个DOM节点进行变异

const-toggleButton=document.querySelector（“[data-toggle]”）；
toggleButton.addEventListener（'click'，toggleRows）；
函数toggleRows（）{
const STYLE_ID='表行隐藏'；
const prevStyle=document.getElementById（样式ID）；
如果（prevStyle）{
prevStyle.parentNode.removeChild（prevStyle）；
}否则{
常量css=`
.隐蔽的{
显示：无；
}
`;
const style=document.createElement（'style'）；
style.id=style\u id；
style.innerHTML=css；
document.head.appendChild（样式）；
}
}

td{
边框：1px实心；
边界塌陷：塌陷；
填充：0.25rem；
}

切换
A.
B
C
E
F
G
H
我

也许你可以用javascript30k行更改css，而不是设置一个atribute，这是个问题，你可以让dom sad:（，使用分页代替。也许你可以用javascript30k行更改css，而不是设置一个atribute，这是个问题，你可以让dom sad:（，使用分页代替。）

function hideTr (c){
    var rows = document.getElementsByClassName(c)
    for(var i = 0; i < a.length; ++i) {
        rows[i].setAttribute("show","off")
    }
}