logo标签列表

确定HTML表格中的顶行

javascripthtmlscrollhtml-tablescrollbars
3

我有一个带有滚动条的HTML表格（即设置了overflow）。当我滚动表格时，我想要获取当前位置的顶部行（即根据用户查看表格的位置）。

我该如何做到这一点？

你们中的任何人能给我提供一个例子吗？

4个回答
2
以下是您可能会发现有用的内容，如果您正在使用纯JavaScript进行开发。这绝对不是完美的，但可能会激发一些想法... JSFiddle示例 [更新] 上述链接中的代码
JavaScript
document.getElementById('btn').onclick = function() {
    var tbl = document.getElementById('tbl');
    var scrollAmt = document.getElementById('asdf').scrollTop;
    var totalRowHeight = 0,
        viewTolerance = 1/3, //if only 1/3 of row is showing highlight next row
        rowHeight;

    for( var i = 0; i < tbl.rows.length; i++ ) {
        totalRowHeight += rowHeight = tbl.rows[i].offsetHeight;
        if( totalRowHeight > scrollAmt ) {
            //if row doesn't meet viewTolerance requirement highlight next row
            var rowIndex = (totalRowHeight - scrollAmt < rowHeight*viewTolerance) ? i + 1: i;
            tbl.rows[rowIndex].style.backgroundColor = '#ff00ff';
            break;
        }
    }
}

HTML

<div id="asdf">
    <table id="tbl">
        <tbody>
            <tr><td>asdf</td><td>asdf1</td></tr>
            <tr><td>asdf</td><td>asdf2</td></tr>
            <tr><td>asdf</td><td>asdf3</td></tr>
            <tr><td>asdf</td><td>asdf4</td></tr>
            <tr><td>asdf</td><td>asdf5</td></tr>
            <tr><td>asdf</td><td>asdf6</td></tr>
            <tr><td>asdf</td><td>asdf7</td></tr>
            <tr><td>asdf</td><td>asdf8</td></tr>
        </tbody>
    </table>
</div>
<input type="button" value="getTop()" id="btn" />

CSS

#asdf{
    height:100px;
    overflow:scroll;
}
1

如果您不想使用JQuery，您可以这样做。

<script language="javascript">
function DoSomethingWithTopRowOfTable {
var myTable = document.getElementById('IdOfYourTable');
var tr = myTable.rows(i);
//To access the first cell...
var cll = tr.cells(0);
//To get text of first cell in first row...
var cellText = cll.innerText;
}
</script>
1
这里是一些模拟代码... 它将相对于用户视图的最顶层表格行的背景颜色设置为#FF00FF。 还没有测试过嵌套表格的效果。它可能会同时选中您表格内部的表格行... 因此，在测试之前，您需要检查TRs的parentNode。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script>

function findScreenPosition(element) {
    if (element.offsetParent)
    {
        var parentPos = findScreenPosition(element.offsetParent);
        return [element.offsetLeft + parentPos[0], 
                element.offsetTop - element.scrollTop + parentPos[1]
        ];
    }else{
        return [element.offsetLeft, 
                element.offsetTop - element.scrollTop
        ];
    }
}

var lastTopElement = null;
window.onscroll = function()
{
    table = document.getElementById("table");
    var innerRows = table.getElementsByTagName("tr");

    var done = false;
    for(var i = 0; i < innerRows.length && !done; i++)
    {
        if(findScreenPosition(innerRows[i])[1]+innerRows[i].offsetHeight > 0)
        {
            done = true;
            innerRows[i].style.backgroundColor = "#FF00FF";

            if(lastTopElement != null)
                lastTopElement.style.backgroundColor = "";

            lastTopElement = innerRows[i];
        }
    }
};
</script>
</head>
<body>
<table width="500px" id="table">
    <tr><td>this is a row</td></tr>
    <tr><td>this is a row</td></tr>
    <tr><td>this is a row</td></tr>
    <tr><td>this is a row</td></tr>
    <tr><td>this is a row</td></tr>
    <tr><td>this is a row</td></tr> <!-- repeat as much as you want... this works with scrolling too -->
</table>
</body>
</html>
-2
$("table:first").find("tr:first")
这会让我在表格视图中获取第一行吗？无论滚动的数量或实际第一行出现在哪里？ - user517400
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接