使用Javascript/JQuery進行HTML表格的程序化滾動

Question

我已經完成了大量的Google搜索，並在堆棧溢出和其他網站上實現了一些解決方案，但無法讓我的表在程序控制下滾動。

我正在執行變量名的滾動表以便在圖中使用。我有200多個變量，所以我希望用戶能夠鍵入變量名稱的某個片段，並通過滾動顯示該列表中的變量。除了滾動部分，我有這個工作。

這是一個表的樣子：

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

這是定義表中的HTML：我創建表的編程方式使用Javascript的內容

<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> 

。正如你從上面的圖像鏈接中看到的那樣，表格的外觀和功能與我設計的一樣。

下面是一些相關的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

這裏是滾動工作的小提琴：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 */ 
} 

現在，你只需要實現它在您自己的JavaScript，通過選擇正確的TR爲var rows。

我希望它能幫助你理解。