取消隐藏表格行会导致表格跳转，您如何解决此问题？答案

【问题标题】：Unhiding table rows causes table to jump, how do you fix this?取消隐藏表格行会导致表格跳转，您如何解决此问题？
【发布时间】：2015-09-18 19:33:31
【问题描述】：

我有一个基于过滤器的数据行生成的表。如果每个单元格中的数据与过滤器选项不匹配，这些过滤器会隐藏和取消隐藏行。我遇到的问题是，当我隐藏超过 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 是一个结构数组，用于保存从我的数据库生成的数据。在我的同步功能中，过滤器数组包含要过滤的选定选项。隐藏和取消隐藏的工作原理，我只是想办法防止在此脚本运行时桌子跳动。

【问题讨论】：

我不知道你说的“跳跃”是什么意思。题外话，但是当您弄清楚这一点时，请考虑前往codereview.stackexchange.com 以获得一些帮助以减少代码中的重复。你可以做一些大幅度的减少。
描述跳跃？你想让它动画吗？淡入淡出？
jsfiddle.net/PvwfK 这应该有助于stackoverflow.com/questions/7564043/…
当表格更新时，它会闪烁或跳到页面顶部几秒钟，然后它会回到原来的位置。
难以检查。你能创造一个小提琴吗？

标签： javascript jquery html html-table show-hide

【解决方案1】：

也许不是在你的loop 中显示和隐藏，如果你的表真的很大，你可以在hidetable 中显示和隐藏table，而你的循环正在运行并使用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;
}

【讨论】：