I am trying to create a web page with an element table that the user can select. The number of elements can be as small as one element, but also increase to 120. I do not want the table to stretch the page, so I am typing it into my <div> with a specific height and vertical scroll bar. Example with a bare bone:
<div style="width:100px; height:100px; overflow-y:scroll; overflow-x:hidden;"> <table> <tr><td>item 1</td></tr> <tr><td>item 2</td></tr> <tr><td>item 3</td></tr> <tr><td>item 4</td></tr> <tr><td>item 5</td></tr> <tr><td>item 6</td></tr> <tr><td>item 7</td></tr> <tr><td>item 8</td></tr> <tr style="color:#00aa00"><td>item 9</td></tr> </table> </div>
In this example, the table is in the vertical scroll area, and the active item is the last in the table. So far so good.
My question is: When updating this table, how can I set it so that it automatically scrolls to the end? For example, when a page is created, it should automatically select item # 9; the user interface should already highlight this element in the list, which means that the scroll bar to the end is automatically set.
I see no way to do this with the <div> (although maybe something is missing). Do I need to use the <iframe> some way? I believe that if each row of the table has an anchor tag, then the scroll position can be set this way. I'm not quite sure how to do this, so I thought I'd ask.
I know that there are probably data table plugins that I can use to do this (I used to use YUI before and I never figured out if he could solve this particular problem). But it seems simple enough that I don’t feel that I will need to import any plugin that could easily be used as an entire spreadsheet in a browser.
Multimedia mike
source share