Question

我在div中有一张表格如下：

<div class="posts" style="height: 800px; width:330px; overflow:scroll;" >
         <table class="price" id="price" cellpadding="10px" border="1">
                // some stuff    

         </table>
</div>

我想通过使用Javascript或jQuery来聚焦div以滚动到表的特定行。因此，如果调用该函数，用户将在div块的中间看到该行。

我该怎么做？谢谢！

Answer 1

基本上，您会获得对要滚动到的单元格（<td>）或行（<tr>）的引用。然后，您只需调用该元素的scrollIntoView方法。

即

var tgtElement = document.getElementById('idOfDesiredRowOrCell');
tgtElement.scrollIntoView();

这是一个简单的例子，请注意我只是按编号找到所需的行 - 您很可能希望以不同的方式选择目标元素。另外，请注意，创建了20行，因此有效输入的范围是[0..19] - 选择19将滚动直到第19行可见 - 尽管它位于div的 bottom 而不是顶部。我想你可以在表后添加一些<br>元素，如果你真的必须将所选行滚动到div的顶部。

<强> HTML：

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

window.addEventListener('load', mInit, false);

function mInit()
{
    var tbl = makeTable(20, 5);
    byId('scrollMe').appendChild(tbl);

    byId('doScrollBtn').addEventListener('click', onScrollBtnClick, false);
}

function onScrollBtnClick()
{
    var tbl = byId('demoTable');
    var rowNum = byId('scrollRowInput').value;
    var selectedRow = tbl.rows[rowNum];
    selectedRow.scrollIntoView();
}

function makeTable(numRows, numCols)
{
    var x, y, tbl, row, cell;
    tbl = newEl('table');
    tbl.id = 'demoTable';
    for (y=0; y<numRows; y++)
    {
        row = newEl('tr');
        for (x=0; x<numCols; x++)
        {
            cell = newEl('td');
            cell.appendChild( newTxt("Cell: " + x + ", " + y) );
            row.appendChild(cell);
        }
        tbl.appendChild(row);
    }
    return tbl;
}

</script>
<style>
#scrollMe
{
    height: 150px;
    border: solid 1px red;
    overflow-y: scroll;
}
</style>
</head>
<body>
    <div id='scrollMe'></div>
    <input id='scrollRowInput'/><button id='doScrollBtn'><-- Scroll to this row</button>
</body>
</html>

Answer 2

也许jQuery scrollTop 可以帮助您实现这一目标。请检查下面的代码，最后您将找到一个工作示例的链接：

<强>的JavaScript

$(document).ready(function(){
    // Count rows
    var length = $('tr', $('.price')).not('tr:first').length;
    // Build links to rows from row 1 (to ignore table header)
    for( i=1; i <= length; i++ ) {
        $('.pages').append('<a class="linkrow" href="'+i+'">Row '+i+'</a> | ');
    }
    // On click
    $('a.linkrow').on('click',function(e){
        // Prevent default
        e.preventDefault();
        // Get row index from link href
        var rowId = $(this).attr('href');
        // Get row position by index
        var ypos = $('.price tr:eq('+rowId+')').offset().top;
        // Go to row
        $('.posts').animate({
            scrollTop: $('.posts').scrollTop()+ypos
        }, 500);
        // Some CSS to visualize which row is being viewed
        $('.price tr').css({'background-color': 'none'});
        $('.price tr:eq('+rowId+')').css({ 'background-color': '#ccc' } );
    });
});

jsFiddle示例：http://jsfiddle.net/laelitenetwork/XEfHr/

将可滚动div聚焦到一个位置

2 个答案: