使用 JQuery 添加和删除表行时防止跳转

Question

我在使用 JQuery 添加和删除表行时遇到了一点问题。

基本上我想要做的是有一个具有固定行数（例如 25 行）的表，并且我想每隔一段时间添加新数据。

为此，我将删除表格中的最后一行并在表格顶部添加一个新行。

想要的效果可以满足我的需求，但有一个问题。

如果我向下滚动页面并且看不到表格的上半部分（超出浏览器窗口的顶部），但可以看到下半部分（在浏览器窗口的顶部），则浏览器似乎删除和添加行时向下滚动。

基本上，浏览器似乎将自己“固定”在一行上。然后，随着该行在表格中向下移动，浏览器会跟随它，从而导致不希望的跳转效果。

有没有办法防止这种情况发生，或者有没有更好的方法来实现表格？

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);
  }
}

在删除tr 之前使用jQuery slideDown 方法。

希望这会对你有所帮助。