Javascript - скрывать строки таблицы очень медленно - PullRequest
Новая
       9

Javascript - скрывать строки таблицы очень медленно

1 голос
/ 03 июля 2019

вопрос новичка здесь:

У меня огромная таблица HTML, скажем, 30 000 строк, каждая строка имеет имя класса (всего около 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")
    }
}

Прошу прощения, если есть тема, касающаяся этого, я ничего не нашел.И спасибо за любой совет.

1 Ответ

0 голосов
/ 03 июля 2019

Вместо того, чтобы мутировать каждый узел DOM, вы можете создать CSS и вставить его в <head> и позволить браузеру обрабатывать все остальное. 

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>
...