3

スクロールバー付きの html テーブルがあります (つまり、オーバーフローが設定されています)。テーブルをスクロールすると、現在の一番上の行の位置を取得したいと思います（つまり、テーブルのユーザービューに従って）。

どうすればいいですか？

あなたの誰かが例を手伝ってくれますか？

4

4 に答える 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;
}
于 2010-12-08T05:35:33.237 に答える
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>
于 2010-12-08T05:28:30.863 に答える
1

いくつかのモックアップ コードを次に示します。これは、[ユーザーの視点から見て] テーブルの一番上の行の背景色を #FF00FF に設定します。ネストされたテーブルでこれをテストしていません。おそらく、テーブル内のテーブルの行も取得します...したがって、TRをテストする前に、TRの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>
于 2010-12-08T05:38:35.627 に答える
-2 
$("table:first").find("tr:first")
于 2010-12-08T05:15:44.560 に答える