javascript - 取消隐藏表格行会导致表格跳转，如何解决这个问题？

Question

我有一个表格，它是根据过滤器生成的数据行。如果每个单元格中的数据与过滤器选项不匹配，这些过滤器会隐藏和取消隐藏行。我遇到的问题是，当我隐藏超过 400 行然后取消隐藏这些行时，表格会跳转。我需要找到一种方法来保持表格静止，同时取消隐藏行并将其放回表格中。以下代码展示了我最初是如何创建表格的，然后是如何过滤表格的。

创建表:

for(var i = 0;i<records.length;i++){        

    table.append('<tr id="'+i+'">'+
            '<td class="cell">'+
            records[i].apmID +
            "</td>"+
            '<td class="cell">' +
            records[i].name +
            "</td>" +
            '<td class="cell">'+
            records[i].status +
            "</td>"+
            '<td class="cell">'+
            records[i].item +
            "</td>"+
            '<td class="cell">'+
            records[i].modifiedDate +
            "</td>"+
            '<td class="cell"><div id ="ind'+i+'"class="expiration_indicator" style="background-color: '+
            records[i].expirationIndicator +
            '"></div></td>'+
            "</tr>");
 }

更新表格

function synchronize(){
for(var i = 0; i < records.length; i++){
    var show = true;
    if($("#apmID").attr('value') != "" && show){
        if(records[i].apmID.indexOf($("#apmID").attr('value')) == -1){
            show = false;
        }
    }
    if(nameFilters.length > 0 && show){
        if(nameFilters.indexOf(records[i].name) == -1){
            show = false;
        }
    }
    if(statusFilters.length > 0 && show){
        if(statusFilters.indexOf(records[i].status) == -1){
            show = false;
        }
    }
    if(itemFilters.length > 0 && show){
        if(itemFilters.indexOf(records[i].item) == -1){
            show = false;
        }
    }
    if(modifiedDateFilters.length > 0 && show){
        if(modifiedDateFilters.indexOf(records[i].dateRangeIndicator) == -1){
            show = false;
        }
    }
    if(expirationFilters.length > 0 && show){
        if(expirationFilters.indexOf(records[i].expirationIndicator) == -1){
            show = false;
        }
    }

    var reportRow = "#"+i.toString();

    if(show){
        $(reportRow).show();
    }
    else{
        $(reportRow).hide();
    }
}
 }

Records 是一个结构数组，用于保存从我的数据库生成的数据。在我的同步函数中，过滤器数组包含要过滤的选定选项。隐藏和取消隐藏的工作原理，我只是想出一个办法来防止表格在这个脚本运行时跳动。

Answer 1

也许如果你的表真的很大，而不是在你的循环中显示和隐藏它会产生一些奇怪的效果，你可以隐藏 表 在循环运行时使用 class 显示或隐藏行。例如:

    function synchronize(){
    $('table').hide()
    for(var i = 0; i < records.length; i++){
        var show = true;
        if($("#apmID").attr('value') != "" && show){
            if(records[i].apmID.indexOf($("#apmID").attr('value')) == -1){
                show = false;
            }
        }
        if(nameFilters.length > 0 && show){
            if(nameFilters.indexOf(records[i].name) == -1){
                show = false;
            }
        }
        if(statusFilters.length > 0 && show){
            if(statusFilters.indexOf(records[i].status) == -1){
                show = false;
            }
        }
        if(itemFilters.length > 0 && show){
            if(itemFilters.indexOf(records[i].item) == -1){
                show = false;
            }
        }
        if(modifiedDateFilters.length > 0 && show){
            if(modifiedDateFilters.indexOf(records[i].dateRangeIndicator) == -1){
                show = false;
            }
        }
        if(expirationFilters.length > 0 && show){
            if(expirationFilters.indexOf(records[i].expirationIndicator) == -1){
                show = false;
            }
        }

        var reportRow = "#"+i.toString();

        if(show){
            $(reportRow).addClass('toShow').removeClass('toHide');
        }
        else{
            $(reportRow).removeClass('toShow').addClass('toHide');
        }
    }
    $('table').show()
}

在你的CSS中

table tr.toShow
{
    display: block;
}
table tr.toHide
{
    display: none;
}