javascript - 滚动时自动加载 TR

Question

拜托，我有大约 5000 行实时编辑数据...
我希望能够显示前 200 行，然后在用户向下滚动页面时显示接下来的 200 行..并且可能隐藏前 200 行...
在 stackoverflow 上进行了一些搜索后..我发现 this代码，但似乎不太理解

    <table id="loadingtable" cellpadding="0" border="1" cellspacing="3" align="center" width="80%">
    <?php
    function createtr($value, $stop)
    {
        while($value <= $stop){
            echo'<tr>';
                echo '<td>';
                    echo "cell {$value}";
                echo '</td>';
            echo '</tr>';
            $value++;
        }
    }
    
    createtr(1, 5000);
    ?>  
    </table>

这是 Jquery

       $("#loadingtable tr").slice(100).hide();
       
        var mincount = 100;
        var maxcount = 100; 
    
        $(window).scroll(function() 
        {
            if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                    $("#loadingtable tr").slice(mincount,maxcount).fadeIn(800);
            mincount = mincount+100;
            maxcount = maxcount+100
        
        }
    }); 

该代码不适用于..请帮忙非常感谢..

Answer 1

$("#loadingtable tr").slice(100).hide();

    var mincount = 0;
    var maxcount = 100; 

    $(window).scroll(function() 
    {
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
            $("#loadingtable tr").slice(mincount,maxcount).fadeOut(800);
            mincount = mincount+100;
            maxcount = maxcount+100;
            $("#loadingtable tr").slice(mincount,maxcount).fadeIn(800);

    }
if($(window).scrollTop() <= 200) {
        $("#loadingtable tr").slice(mincount,maxcount).fadeOut(800);
        mincount = mincount-100;
        maxcount = maxcount-100;
        $("#loadingtable tr").slice(mincount,maxcount).fadeIn(800);

}
}); 

当用户滚动到页面底部时，这将加载接下来的 100 行 - 400 像素。要隐藏上面的行，您需要先添加一个类似的函数，以便在他开始向上滚动时取消隐藏，然后使用 FadeOut

您需要添加边界条件检查(mincount < 0 且 maxcount > 5000)