javascript - 在固定高度表中设置自动滚动到底部

Question

我有一个固定高度的表格，我正在使用 javascript 添加行。我的问题是一旦它到达卷轴。滚动设置在顶部，我看不到新添加的行。我想在添加行时向下滚动。

我试过这个在 Firefor 和 chrome 中工作，但在 IE8 中没有工作。

$(document).ready(function(){

        $('button[id^="product"]').click(function () {

              var newTr = $('<tr></tr>');

                newTr.html('<td width="29px" style="text-align:center;">x</td><td width="144px">Product 1</td><td width="44px" style="text-align:center;">2</td><td width="86px style="text-align:right;">16.50</td>');

                newTr.appendTo("#saletbl");

         var tableElement = document.getElementById('saletbl');

         tableElement.scrollTop = tableElement.scrollHeight;
          });
    });

Answer 1

你为什么不使用div。您可以将表格放入 div 中。如果您只想显示垂直滚动条，也可以关闭水平滚动条。

<div style="overflow:scroll;horizontal-scroll;overflow-x:hidden;">

使用 -ms-overflow-x:hidden

在 IE8 中。

Answer 2

您可以在追加行后将焦点设置到表格的最后一行，方法是替换这个

var tableElement = document.getElementById('saletbl');

     tableElement.scrollTop = tableElement.scrollHeight;

对此

$("#saletbl tr:last-child").focus()