Javascript 行数较多的表更新速度较慢

我有一个非常大的表（几千行）的页面

该表显示了某些筛选器指定的数据子集。每当其中一个过滤器发生更改时，我需要更新该表

基本上，有几个复选框和一个文本框，每当这些更改之一时，我就会重新加载表，以仅显示符合用户指定条件的行

我通过清除表并重新加载与过滤器匹配的行来实现这一点。这是可行的，但已经证明非常缓慢

以下是我的javascript代码：

function reloadTable() {
    var tablebody = document.getElementById("tablebody");

    while(tablebody.hasChildNodes()) tablebody.removeChild(tablebody.firstChild);

    filter = new FilterChecker();

    for (var i=0;i<rows.length;i++) {
        if (filter.isVisible(rows[i]))
            addRowToTable(rows[i]);
    }
}

函数重载表（）{
var tablebody=document.getElementById（“tablebody”）；
while（tablebody.hasChildNodes（））tablebody.removeChild（tablebody.firstChild）；
过滤器=新过滤器检查器（）；
对于（var i=0；i好吧，很抱歉耽搁了，但是我已经忙得不可开交了。我想出了一套很好的逻辑来说明你需要什么


我创建了一些简单的html来说明这一点。它包含两个下拉列表来模拟过滤器，8个数据行来模拟数据网格

<div id="body">
<select id="filterA" class="filter" name="states">
    <option value="filterACT">Connecticut</option>
    <option value = "filterAMA">Mass</option>
</select>
<select id="filterB" class="filter" name="towns">
    <option value="filterBBT">Big Town</option>
    <option value = "filterBST">Small Town</option>
</select>
<div id="grid">
    <div class="row filterACT filterBBT">BigTown CT 1</div>
    <div class="row filterACT filterBBT">BigTown CT 2</div>
    <div class="row filterACT filterBST">SmallTown CT 1</div>
    <div class="row filterACT filterBST">SmallTown CT 2</div>
    <div class="row filterAMA filterBBT">BigTown MA 1</div>
    <div class="row filterAMA filterBBT">BigTown MA 2</div>
    <div class="row filterAMA filterBST">SmallTown MA 1</div>
    <div class="row filterAMA filterBST">SmallTown MA 2</div>
</div>
</div>
</br>
<hr/>
<div>LOG</div>
<hr/>
<div id="log"></div>

然后在我的网格中获取所有行，并开始迭代它们：

    for(var j = 0;j<rows.length;j++)
    {
        writeToLog('Checking row: ' + rows[j].className);
        var rowIsHidden = false;

无论如何，这是可以清理和优化的，但我认为其意图和逻辑相当清楚。希望这有帮助，并且可以随意质疑其中任何一个：）
您可能希望从CSS和Javascript的角度来处理它。与其物理删除行并用新行重新填充对象，不如在选中的事件上使用某种委托函数，在不应显示的行中添加display none。您必须找到一种智能方法来动态识别不同的行租用行的类型。但基本上，如果您使用委托函数而不是遍历每一行，则应该更快。只需借助@Dropzilla注释。您可以使用与每一行相关的类来装饰行，这可能类似于……class=“stateCT catSOMEVALUE”…然后，您可以隐藏未选择筛选值的每一行。@JasonWilczak如何自动隐藏未选择特定值的每一行？让我试一下，看看这是否适合您。您擅长使用jquery吗？@JasonWilczak我从未使用过jquery，只有我自己的代码。
    function filterChange() {
    var filterClasses = [];
    for(var i = 0;i<elements.length;i++) {
        writeToLog('Pushing ('+elements[i].value+') into filter class variable.');
        filterClasses.push(elements[i].value);        
    }

    writeToLog('Filter classes: ' + filterClasses);
    var rows = document.getElementsByClassName('row')
    writeToLog('Row count: ' + rows.length);

    for(var j = 0;j<rows.length;j++)
    {
        writeToLog('Checking row: ' + rows[j].className);
        var rowIsHidden = false;

        for(var k = 0;k<filterClasses.length;k++)
        {
            writeToLog('Checking for class: ' + filterClasses[k]);
            if(rows[j].className.indexOf(filterClasses[k]) < 0)
            {
                writeToLog('Class not found, hide this row.');
                rowIsHidden = true; 
                break;
            }
        }

        writeToLog('Row is hidden: ' + rowIsHidden);
        rows[j].style.display = rowIsHidden ? 'none' : 'block';

    }
}