0

我在 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 块的中间看到该行。

我怎样才能做到这一点？谢谢！

4

2 回答 2

2

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

IE

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

这是一个简单的示例，请注意，我只是按数字定位所需的行 - 您很可能希望以不同的方式选择目标元素。另外，请注意创建了 20 行，因此有效输入的范围是 [0..19] - 选择 19 将滚动直到第 19 行可见 - 尽管它位于 div 的底部，而不是顶部。<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>
于 2013-10-22T02:48:54.847 回答
0

也许 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/

于 2013-10-22T03:55:11.300 回答