jquery - jquery テーブル行を追加し、テーブル行を削除します。最大 10 行

Question

呼び出された別のページから行を取得する .aspx ページに Gridview があります。この別のページは、SQL クエリの結果として 1 つのテーブル行 (tr) を返します。これは毎秒発生します。

テーブル/グリッドビューの上部に新しい行が追加されます。

行数を 10 などの数値に制限する必要があります。これまでのコード (主に Stackoverflow の例で見つかります) は、テーブルが 10 行になると 9 番目と 10 番目の行がちらつくことを除いて、かなりうまく機能します。つまり、9 行、次に 10 行、次に 9 行というように表示されます。

理想的には、行を 10 まで追加し、新しい行が追加されると、10 番目または最後の行がちらつきなくドロップオフします。いわばより「流動的」です。スクロールしているかのように。

私が見つけたすべての例は、ボタンのクリックの結果として行を削除します。テーブル/グリッドビューを 10 まで増やす必要があります。その後、新しい行が追加されると、最後の行が削除されます。

これが理にかなっていることを願っています。

これを改善する方法について何か提案はありますか? ありがとうございました。

<script type="text/javascript" >
  var jq = jQuery.noConflict();
  f1();
  function f1() {  // gridView updated every 1000ms
    jq(document).ready(function () {
      var lastid = jq.cookie("maxid");  // set by pageInit
      if (lastid != "0")
        jq.get("page2.aspx", function (dataReturned) {
          if (dataReturned != "")    // rows in database - add to the gridView 
          {
            // add new row
            jq('#<%=GridView1.ClientID %> tr:first').after(dataReturned);
            // hide the new row, then fade it back in ----  tr:eq(0) is the header row.

            jq('#<%=GridView1.ClientID %> tr:eq(1)').hide().fadeIn(1000, function () { 
                  // nop
                }).css('display', 'table-row');
          }
          window.setTimeout("f1()", 1000);
        });
      else
        jq.get("page2.aspx", function (dataReturned) {
          if (dataReturned != "")     //new rows in database 
          {
            jq('#<%=GridView1.ClientID %>').html(dataReturned);
          }
          window.setTimeout("f1()", 1000);
        });
    });
       LimitRows();
    }

  function LimitRows(){
    while (jq('#<%=GridView1.ClientID %> tr').length > '10')
     {
       jq('#<%=GridView1.ClientID%> tr:last').remove();
    }      }    
</script>