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

原文 标签 javascript jquery html css html-table

我已经进行了广泛的 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 编程很陌生。

最佳答案

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

首先,为了滚动到一个特定的元素,你必须只选择元素而不是它的父元素,来获得它的位置:

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

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

然后,我们需要滚动到这个父级。所以我们选择.scrollContent这是我们正在谈论的 parent ,并使用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 中实现它,通过为 var rows 选择正确的 TR .

我希望它帮助你理解。

关于javascript - 使用 Javascript/JQuery 以编程方式滚动 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35093087/

相关文章:

javascript - 是否有用于使用 Canvas 的类似 Paint 的应用程序的 Javascript 库?

javascript - 从日历中删除选定的事件

javascript - jQuery ajax异步调用

javascript - Jquery 自定义图像 slider 只工作一次或第三次

javascript - 在事件中更改 jQuery 的 $(this) 对象的值

javascript - 为什么不使用 Angular 设置背景图像?

javascript - 如何在Web应用程序中检索和显示Outlook/Exchange日历事件?

html - 快速从Webview检索HTML数据

javascript - 如何将 Javascript 函数应用于类的多个实例?

html - header 不使用CSS更改样式,但是其他div是