Thanks for the link. I think I can struggle through the problems. -Caroline --- Andrew Robinson <[EMAIL PROTECTED]> wrote:
> http://tinyurl.com/3374pw > > On 7/3/07, Caroline Jen <[EMAIL PROTECTED]> > wrote: > > But, I am using IE 6. I tried to hold the focus > on > > the highlighted first row of the table. It does > not > > work. > > --- Andrew Robinson <[EMAIL PROTECTED]> > > wrote: > > > > > As I mentioned, you have to put the focus on an > > > input element, not a > > > table element. Unless you are on IE, table > elements > > > cannot hold focus > > > and cannot receive key events. > > > > > > On 7/3/07, Caroline Jen <[EMAIL PROTECTED]> > > > wrote: > > > > Hi, I have made something work - I am able to > use > > > the > > > > keyboard down arrow key to highlight the next > row > > > in > > > > the table or use the > > > > > > > > keyboard up arrow key to highlight the > previous > > > row in > > > > the table. And When the page is loaded, the > first > > > row > > > > of the table is > > > > > > > > automatically highlighted (see the code shown > > > below.) > > > > > > > > But, there are two problems: > > > > > > > > Problem 1. Before I use the keyboard keys to > > > scroll > > > > rows one at a time, I have to de-highlight the > > > first > > > > row and re-highlight the first > > > > > > > > row of the table using the mouse. Does it mean > > > that my > > > > table is not "on focus" when the page is > loaded? > > > I > > > > have tried to set the > > > > > > > > focus when the page is loaded: > > > > > > > > window.onload = > function() > > > > { > > > > var table = > > > document.getElementById( > > > > 'countriesList:countryTable' ); > > > > var trs = > > > > table.getElementsByTagName('tr').focus(); > > > > highlightRow( > > > trs[currentRow] ); > > > > } > > > > > > > > Then my first row is no longer highlighted > when > > > the > > > > page is loaded. And other JavaScript functions > > > stop > > > > working. > > > > > > > > I tried to put: > > > > > > > > location.hash="FirstRow"; > > > > > > > > instead. However, I do not know where to put > my > > > > anchor; i.e. <a ...></a> > > > > > > > > Problem 2. I can use the down/up arrow keys to > > > scroll > > > > rows one at a time. However, I have 10 rows on > > > display > > > > within the <div> > > > > > > > > when the page is loaded (and the table has a > > > couple > > > > hundreds of rows.) I want to keep those 10 > rows on > > > the > > > > screen when I am > > > > > > > > moving downwardly until I reached the 10th > row. > > > That > > > > is to sasy, when the highlighter is on the > 10th > > > row > > > > and I press the down > > > > > > > > arrow key, then the first row retires from > view > > > and > > > > the 11th row comes into view. I am still > unable to > > > > figure it out how to do it. > > > > > > > > If someone could kindly help. > > > > > > > > ..... > > > > ..... > > > > <script language="JavaScript1.1" > > > > type="text/javascript"> > > > > var currentRow = 1; > > > > var VISIBLE_ROWS = 10; > > > > > > > > window.onload = > function() > > > > { > > > > var table = > > > document.getElementById( > > > > 'countriesList:countryTable' ); > > > > var trs = > > > table.getElementsByTagName('tr'); > > > > highlightRow( > > > trs[currentRow] ); > > > > } > > > > > > > > var highlightedRow; > > > > > > > > function > > > addOnclickToDatatableRows() { > > > > var trs = > > > > > > > > > > document.getElementById('countriesList').getElementsByTagName('tr'); > > > > for (var i = 0; i > < > > > trs.length; i++) { > > > > trs[i].onclick > = > > > new > > > > Function("highlightRow(this)"); > > > > } > > > > } > > > > > > > > function > highlightRow(tr) > > > { > > > > tr.bgColor = > > > (tr.bgColor != '#0000ff') ? > > > > '#0000ff' : '#ffffff'; > > > > highlightedRow = > tr; > > > > } > > > > > > > > function > > > dehighlightRow(tr) { > > > > tr.bgColor = > > > (tr.bgColor != '#ffffff') ? > > > > '#ffffff' : '#0000ff'; > > > > table = null; > > > > trs = null; > > > > } > > > > > > > > function processKeys( > e ) > > > > { > > > > var table = > > > document.getElementById( > > > > 'countriesList:countryTable' ); > > > > var numRows = > > > table.rows.length; > > > > var keyID = > > > (window.event) ? event.keyCode : > > > > e.keyCode; > > > > > > > > switch (keyID) > > > > { > > > > // Key > up. > > > > case > 38: > > > > if > > > (parseInt(currentRow) == parseInt(1)) > > > > { > > > > > // > > > reached the top of the table; do nothing. > > > > > > > return true; > > > > } else > > > > { > > > > > // > === message truncated === ____________________________________________________________________________________ Sick sense of humor? Visit Yahoo! TV's Comedy with an Edge to see what's on, when. http://tv.yahoo.com/collections/222
