Question

此处的新手问题：

我有一个巨大的HTML表，可以说有3万行，每行有一个类名（总共有cca 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>

有CSS规则

tr[show="off"] {
    display:none;
}

和我显示给他们的JS代码将删除该show属性

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

并隐藏它们的代码

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

很抱歉，没有关于此的主题，我没有发现任何东西。并感谢您的任何建议。

Answer 1

您可以构建一个css并将其注入<head>中，而不是让每个DOM节点变异，让浏览器来处理其余的内容。

const toggleButton = document.querySelector('[data-toggle]');
toggleButton.addEventListener('click', toggleRows);

function toggleRows() {
    const STYLE_ID = 'table-row-hide';
    const prevStyle = document.getElementById(STYLE_ID);
    if (prevStyle) {
        prevStyle.parentNode.removeChild(prevStyle);
    } else {
        const css = `
            .hideable {
                display: none;
            }
        `;
        const style = document.createElement('style');
        style.id = STYLE_ID;
        style.innerHTML = css;

        document.head.appendChild(style);
    }
}

td {
    border: 1px solid;
    border-collapse: collapse;
    padding: 0.25rem;
}

<html>
<head></head>
<body>
<button data-toggle>Toggle</button>
<table>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr class="hideable">
        <td>c</td>
        <td>e</td>
    </tr>
    <tr class="hideable">
        <td>f</td>
        <td>g</td>
    </tr>
    <tr>
        <td>h</td>
        <td>i</td>
    </tr>
</table>
</body>
</html>

Javascript-隐藏表行非常慢

1 个答案: