JQueryで表の行を追加および削除するときのジャンプ防止

Question

JQueryで表の行を追加および削除する際に問題があります。

基本的には、固定された行数（たとえば25）のテーブルを作成し、新しいデータを頻繁に追加したいと考えています。

これを行うには、テーブルの最後の行を削除し、新しい行をテーブルの先頭に追加します。

希望の効果は私のニーズには問題ありませんが、1つの問題があります。

テーブルの上半分（ブラウザウィンドウの上部を越えて）、ビューの下半分（ブラウザウィンドウの最上部）をブラウザに表示すると行が削除されて追加されたときにスクロールします。

基本的には、ブラウザがその行を「固定」しているようです。次に、その行がテーブルの下に移動するにつれて、ブラウザがそれに追従して望ましくないジャンプ効果を引き起こします。

これを防ぐ方法はありますか、それともテーブルを実装する方法がありますか？

HTML：

<table style="width:100%" id="mytable"> 
    <tr> 
    <td>Dave</td> 
    ... 
    </tr> 
</table> 

JS：

function addRow() { 
    var tradeTable = $('#mytable'); 
    var rowCount = $('#mytable tr').length; 
    var html = "<tr><td>Dave"+Math.floor((Math.random() * 100) + 1)+"</td></tr>"; 
    if (rowCount >= 40) { 
    $('#mytable tr:last').remove(); 
    $('#mytable > tbody > tr:first').before(html); 
    } else { 
    $('#mytable > tbody > tr:first').before(html); 
    } 
} 

setInterval(addRow, 500); 

Answer 1

ここで解決

function addRow() { 
 
    var tradeTable = $('#mytable'); 
 
    var rowCount = $('#mytable tr').length; 
 
    var html = "<tr><td>Dave"+Math.floor((Math.random() * 100) + 1)+"</td></tr>"; 
 
    if (rowCount >= 40) { 
 
    $('#mytable tr:last').slideUp("slow",function(){ 
 
     $(this).remove(); 
 
    }); 
 
    $('#mytable > tbody > tr:first').before(html); 
 
    } else { 
 
    $('#mytable > tbody > tr:first').before(html); 
 
    } 
 
}

使用ですを削除する前にメソッドを削除してください。

希望すると、これが役立ちます。