滚动到固定高度表中的活动表格行

我有一个固定高度的表格在div内。我想滚动到该表中的特定行。我提到这个链接http://jsfiddle.net/SZKJh/1/，但它不适用于固定的桌面高度。以下是代码片段，请协助我解决此问题。滚动到固定高度表中的活动表格行

function GotoRow(){ 
 
    var w = $('#forPmpIterate'); // my div 
 
    var row = $('#tableiterate').find('tr') 
 
     .removeClass('active') 
 
     .eq(+$('#line').val()) 
 
     .addClass('active'); 
 
    
 
    if (row.length){ 
 
     $('#forPmpIterate').animate({scrollTop: row.offset().top - (w.height()/2)}); 
 
           
 
    } 
 

 
}

<div id="forPmpIterate"> 
 

 
        <div id="control" style="float:right;padding-right:15px"> 
 
         Go to stage: <input type="text" size="5" id="line" /> 
 
         <input type="button" onclick="GotoRow()" value="Go" /> 
 
        </div> 
 
        <table id="tableiterate" class="table table-fixed"> 
 
<thead> 
 
          <tr> 
 
</tr> 
 
</thead> 
 
    <tbody> 
 
<tr> 
 
<!-- many rows here --> 
 
</tr> 
 
</tbody>

而且我的风格是如下，

<style> 
 
    /* */ 
 

 
    .table-fixed thead { 
 
     width: 100%; /*97%;*/ 
 
     padding-left: 4px; 
 
    } 
 

 
    .table-fixed tbody { 
 
     height: 230px; 
 
     overflow-y: auto; 
 
     width: 100%; 
 
    } 
 

 
    .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { 
 
     display: block; 
 
    } 
 

 
     .table-fixed tbody td { 
 
      float: left; 
 
      border-bottom-width: 0; 
 
      border: 1px solid #eee; 
 
     } 
 

 
     .table-fixed thead > tr > th { 
 
      float: left; 
 
      border-bottom-width: 0; 
 
      background-color: #eee; 
 
      padding-left: 4px; 
 
     } 
 
</style>

来源

2016-12-07 Ali A

我能解决问题，这里的更新代码http://jsfiddle.net/SZKJh/1084/

下面的代码

scrollTop: row.offset().top - singleTr.clientHeight

所以基本上你只需要使用TR的高度减去活动行的顶部位置值。这就是你如何获得适当的滚动位置。

来源

2016-12-08 10:37:11 balapa

嗨巴拉帕，感谢您的回复，很好的解决方案。但实际上我的桌子有300多条记录，因此我有固定的表头和固定的高度。如果您在代码中包含这些样式，那么它不起作用。 .table-fixed tbody { height：230px; overflow-y：auto; 宽度：100％; } .table-fixed thead，.table-fixed tbody，.table-fixed tr，.table-fixed td，.table-fixed th {display：block;} –

**实际上，对于显示模块而言，它不起作用。在我的页面中，我共有3个表格，但对于这个特定的表格，我需要滚动查看特定的行。请帮助我。** –

这个怎么样？ http://jsfiddle.net/SZKJh/1086/ – balapa

滚动到固定高度表中的活动表格行

回答

相关问题