确定 html 表格中的顶行

发布于 2024-10-06 10:01:12 字数 103 浏览 5 评论 0原文

我有一个带有滚动条的 html 表（即设置了溢出）。当我滚动表格时，我想获取当前顶行的位置（即根据表格的用户视图）。

我该怎么做？

你们中有人能帮我举个例子吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相对绾红妆 2024-10-13 10:01:12

如果您使用普通 JavaScript，以下内容可能会帮助您入门。它绝对不完美，但可能会激发一些想法... JSFiddle 示例

< Strong>[更新] 来自上面

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

Here is something that might help get you started if you're going at it with vanilla JavaScript. It's definitely not perfect but might spark some ideas... JSFiddle Example

[update] code from link above

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

回复收藏 0 原文

空袭的梦i 2024-10-13 10:01:12

如果你不想使用 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>

If you don't want to use JQuery you can do it this way.

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

回复收藏 0 原文

夏末染殇 2024-10-13 10:01:12

这是一些模拟代码。它将最上面的[相对于用户的观点]表行的背景颜色设置为#FF00FF。尚未使用嵌套表对此进行测试。它也可能会获取表内的表行...因此，在测试 TR 之前，您必须检查 TR 的父节点。

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

Heres some mock up code.. It sets the topmost [relative to the user's point of view] table row's background color to #FF00FF. Haven't tested this with nested tables. It'll probably pick up the rows of tables inside your table as well... So you'd have to check the parentNode of your TRs before testing them.

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

回复收藏 0 原文