Определить верхнюю строку в таблице HTML - PullRequest
Новая
       5

Определить верхнюю строку в таблице HTML

3 голосов
/ 08 декабря 2010

У меня есть HTML-таблица с полосой прокрутки (т.е. установлено переполнение). Когда я прокручиваю таблицу, я хотел бы получить текущую верхнюю строку в позиции (то есть согласно пользовательскому представлению таблицы).

Как бы я это сделал?

Может ли кто-нибудь из вас помочь мне примером?

Ответы [ 4 ]

2 голосов
/ 08 декабря 2010

Вот кое-что, что может помочь вам начать, если вы собираетесь использовать ванильный 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 голос
/ 08 декабря 2010

Вот некоторый макет кода. Он устанавливает цвет фона строки самой верхней [относительно точки зрения пользователя] таблицы # FF00FF.Не проверял это с вложенными таблицами.Вероятно, он также подберет строки таблиц внутри вашей таблицы ... Так что вам придется проверить parentNode ваших 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>
1 голос
/ 08 декабря 2010

Если вы не хотите использовать 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>
0 голосов
/ 08 декабря 2010 
$("table:first").find("tr:first")
...