Question

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

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

要做到这一点，我将删除表格中的最后一行，并在表格的顶部添加一个新行。

理想效果对我的需求很好，但有一个问题。

如果我向下滚动页面并让表格的上半部分超出视图（超出浏览器窗口的顶部），但是下半部分在视图中（在浏览器窗口的顶部），浏览器似乎删除并添加行时向下滚动。

基本上似乎浏览器是＆＃34;固定＆＃34;本身就是一排。然后，当该行向下移动时，浏览器会跟随它，从而导致不希望的跳跃效果。

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

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

这是解决方案

＆＃13;

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

＆＃13;

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

希望这会对你有所帮助。

使用JQuery

1 个答案: