javascript - 使用 Javascript/JQuery 以编程方式滚动 HTML 表格

Question

我进行了广泛的 Google 搜索，并实现了在堆栈溢出和其他网站上找到的许多解决方案，但无法让我的表格在程序控制下滚动。

我正在实现一个变量名滚动表以在绘图中使用。我有 200 多个变量，所以我希望用户能够键入变量名称的一些片段并通过滚动在列表中显示该变量。除了滚动部分外，我都可以正常工作。

表格是这样的:

http://www.oceanatlas.com/images/list1.png

这是定义表格的 HTML:

<div id="ySeriesParamChooser" class="ParamChooser">
  <table id="yparamtable" cellspacing="0" border="1" >
    <thead class="fixedHeader">
      <tr>
         <th colspan="3">Primary Y Axis</th>
      </tr>
    </thead>
    <tbody class="scrollContent" style="text-align: center;">
       <tr>
           <td>Cell Content 1</td>
           <td>Cell Content 2</td>
           <td>Cell Content 3</td>
       </tr>
    </tbody>
  </table>
</div>

我使用 Javascript 以编程方式创建表的内容。正如您从上面的图片链接中看到的那样，表格的外观和功能与我设计的一样。

这是一些相关的 CSS:

html>body tbody.scrollContent {
    display: block;
    height: 193px;
    overflow: auto;
    table-layout: fixed;
    font-family: Helvetica, Palatino, Arial, sans-serif; 
    font-size: 0.8em;     
    width: 100%
}

.ParamChooser {
     padding: 0px 10px 0px 0px;
     float:left;
     font-family: Droid Sans, Arial, Helvetica, sans-serif; 
     font-size: .8em;
     cursor:default;
 }

我尝试过的:

// this code correctly find the nth <tr> in the table
var symTarg = "#" + this.jqSel ;
var row = $(symTarg).find('tr').eq(n);

row.scrollIntoView();   // this doesn’t do anything

// this didn’t do anything
var scrollTarg = "#" + this.jqSel + “.scrolltable";  // jqSel == "yparamtable"
var row = $(symTarg).find('tr').eq(n);
if (row.length) {
    $(scrollTarg).scrollTop(row.offset().top - ($(scrollTarg).height()/2));
 }

// tried this to see if I could just scroll to the last row
var symTarg = "#" + this.jqSel ;  // jqSel == "yparamtable"
var rowpos = $(symTarg).find('tr:last').position();  // finds last <tr>
var content = $(symTarg).find('tbody.scrollcontent');
$(content).scrollTop(rowpos.top);

那么，我做错了什么？我是一名经验丰富的程序员，但对使用 Javascript 进行 UI 编程还很陌生。

Answer 1

这是滚动工作的 fiddle :https://jsfiddle.net/070vx0oo/7/

首先，为了滚动到特定元素，您必须只选择该元素而不是其父元素，以获取其位置:

var rowpos = $('.scrollContent > tr:eq(4)').position(); // finds the 5th <tr> child of .scrollContent

这里的元素是 TR。位置是相对于第一个父级的，即.scrollContent(tbody)

然后，我们需要滚动到这个父级。所以我们选择 .scrollContent，这是我们正在讨论的父级，并使用 scrollTop()。

var content = $('.scrollContent');
$(content).scrollTop(rowpos.top);

因此我们滚动到我们的 TD 的位置。

另请注意，我必须将此 CSS 添加到我们的父级(记住，名为 .scrollContent 的那个)，以便我们可以滚动到其中。

.scrollContent{
  display:block; /* Allows us to resize the element */
  overflow: auto; /* Automatically adds scrollbars if content overflows */
  height:100px; /* Our custom table height */
  position:relative; /* Important ! so javascript get accurate position */
}

现在您只需通过为 var rows 选择正确的 TR，在您自己的 JavaScript 中实现它。

我希望它能帮助你理解。