使用Javascript/JQuery编程滚动HTML表

我做了大量的谷歌搜索，并在stack overflow和其他网站上实现了许多解决方案，但无法让我的表格在程序控制下滚动

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

这是表格的外观：

这是定义表格的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>

我所尝试的：

// 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);

//此代码在表中正确找到第n个
var symTarg=“#”+this.jqSel；
var行=$（symTarg）.find（'tr'）.eq（n）；
row.scrollIntoView（）；//这没什么用
//这没用
var scrollTarg=“#”+this.jqSel+“.scrolltable”//jqSel==“yparamtable”
var行=$（symTarg）.find（'tr'）.eq（n）；
if（行长）{
$（scrollTarg）.scrollTop（row.offset（）.top-（$（scrollTarg.height（）/2））；
}
//尝试此操作以查看是否可以滚动到最后一行
var symTarg=“#”+this.jqSel；//jqSel==“yparamtable”
var rowpos=$（symTarg）.find（'tr:last'）.position（）；//finds last
var content=$（symTarg.find（'tbody.scrollcontent'）；
$（内容）.scrollTop（rowpos.top）；

---

那个么，我做错了什么呢？我是一名经验丰富的程序员，但对Javascript的UI编程还不熟悉。

这里有一些滚动操作：

首先，要滚动到特定元素，您必须仅选择该元素而不是其父元素，以获取其位置：

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

因此，我们滚动到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行

选择正确的TR

---

我希望这有助于您理解。

欢迎来到Stack Overflow！我希望您在这里过得愉快。不，您没有做错任何事。如果您需要澄清，请随时对答案发表评论，不要忘记投票和/或接受好的答案。谢谢您的回复，但我不得不承认，我有点困惑。您颠倒了我的u理解tr和td标记。我创建tr标记来保存包含var名称、选择复选标记和UI链接的多列行，以允许编辑变量的样式（请参见链接）。这就是为什么我搜索匹配，而您正在搜索匹配。您能提供一个示例，说明如何使s滚动吗？再次感谢！当然，我根据您提供的图片调整了我的代码以适应您的HTML结构。因此，是的，tr基本上应该是一行，并且包含多个td。但根据图片，trd您的HTML我以为只有一列。但正如我在回答中提到的，您只需选择正确的父项。我将对其进行编辑。对此很抱歉……我认为一切都发生在行级别，所以我省略了通过编程创建的列。虽然您的代码确实为我提供了解决问题所需的线索，但它是正如您所建议的，我没有选择正确的父项。我将滚动内容的选择器更改为：var scrollTarg=“#”+this.jqSel+”>tbody“现在它开始工作了！谢谢！抱歉，新手问题--我如何标记为已回答？我是否使用“回答你的问题”按钮？”？

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

.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 */
}