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
> > {
> > //
> move one row up.
> >
> scrollRow( "up" );
> >
> setCurrentRow( currentRow );
> >
> return false;
> > }
> > break;
> >
> > // Key
> down.
> > case 40:
> > if
> (currentRow == (numRows - 1))
> > {
> > //
> reached the end of the table; do nothing
> >
> return true;
> > } else
> > {
> >
> scrollRow( "down" );
> >
> setCurrentRow( currentRow );
> > if
> (currentRow > VISIBLE_ROWS)
> > {
> >
> return true;
> > }
> else
> > {
> >
> return false;
> > }
> > }
>
=== message truncated ===
____________________________________________________________________________________
Take the Internet to Go: Yahoo!Go puts the Internet in your pocket: mail, news,
photos & more.
http://mobile.yahoo.com/go?refer=1GNXIC
