How to select visible rows on a screen table in jQuery

Question

OK, I'm at a standstill. I have an HTML table that is at a fixed height, a scrollable div, and I need to select (using jQuery) all the visible rows of the table. These are all the lines that are visible on the screen. This will depend on where the user is currently scrolling in the div. So here is the HTML:

<div style="height:300px;overflow:auto"> <table id="mytable"> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> <tr><td>Row 3</td></tr> <!-- 500 or so more rows here --> </table> </div> 

Using a simple jQuery selector as shown below does not work because it selects all the rows in the table, because they are technically visible according to jQuery. They simply are not visible, because you need to scroll through them to see them.

 $('#mytable').find('tr').filter(':visible'); 

Instead, I need to find out if anyone knows how to select the rows visible in the scrollable div. These are only lines that the user can see at any given time. If they scroll down and the selector starts again, it should return another set of rows that are actually visible.

I hope I correctly explained my question. Let me know if I need to clarify.

Answer 1

There is a jquery extension with viewport selectors that seem to do what you ask for. Library url:

http://www.appelsiini.net/projects/viewport