【问题标题】:How to scroll table to particular tr programmatically如何以编程方式将表格滚动到特定的 tr
【发布时间】:2022-03-10 05:09:05
【问题描述】:

我想使用 Javascript 或 jquery 将 html 表滚动到特定的 tr。目前我可以获得所选 tr 的偏移量。我正在使用 scrollTop 方法。我尝试了以下方法,但它对我不起作用:

var table  = document.getElementById("table");
var tr = table.getElementsByTagName("tr")[3];
var scrollTo = tr.offsetTop;
table.scrollTop = scrollTo;

我也尝试过使用 jquery:

$('#table').animate({scrollTop:0},50);

谁能帮我我哪里错了?

【问题讨论】:

  • 请提供jsFiddle
  • 我已经添加了与功能相关的所有代码。

标签: javascript jquery html


【解决方案1】:

这对我有用,试试这个

var elm = document.getElementById(id);
elm.scrollIntoView(true);

【讨论】:

  • 超级简单,效果很好。似乎好得令人难以置信 - 是否有任何已知的缺点/缺乏对这种方法的支持?
  • 最佳答案,简洁明了
  • 使用jQuery尝试了其他解决方案,但是这个简单的一行完美地工作。
【解决方案2】:

试试这个:http://jsfiddle.net/SZKJh/

var w = $(window);
var row = $('#tableid').find('tr').eq( line );

if (row.length){
    w.scrollTop( row.offset().top - (w.height()/2) );
}

参考:

https://stackoverflow.com/a/7853216/1982680

【讨论】:

    【解决方案3】:

    这里是滚动顶部功能的简单步骤

     var s = $("table tbody > tr:nth-child(20)").position();
     $( "div" ).scrollTop( s.top );
    

    这里是Demo

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-25
      • 2021-09-02
      • 2012-09-18
      • 1970-01-01
      相关资源
      最近更新 更多