Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我的风格如下，

＆＃13;

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

＆＃13;

Answer 1

我已修复您的问题，这是更新后的代码http://jsfiddle.net/SZKJh/1084/

这是代码

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

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

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

1 个答案: