CODEWITHSUNDEEP
javascripthtmlscrollhtml-tablescrollbars
user517400
user517400

Reputation:

Determine top row in html table

I have a html table with scrollbar (i.e. overflow is set). When I scroll the table, I would like to get the the current top-row in position (i.e. according to user-view of table).

How would I do this?

Can anyone of you help me with an example?

Upvotes: 3

Views: 5446

Answers (4)

subhaze
subhaze

Reputation: 8855

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

Upvotes: 2

Warty
Warty

Reputation: 7395

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>

Upvotes: 1

NoAlias
NoAlias

Reputation: 9193

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>

Upvotes: 1

Bhanu Prakash Pandey
Bhanu Prakash Pandey

Reputation: 3785

$("table:first").find("tr:first")

Upvotes: -2

Related Questions