Unable to Set Focus on the First Row of the Data Table

I have a web page coded in JSF. The web page has one input field and one table.

I have rendered both input field and table (using h:dataTabe tag) without problem.

I have also highlighted the first row of that table when the web page is loaded. No problem.

And I have also figured out JavaScript functions to move the highlighter down or up one row at a time using keyboard down arrow key or up arrow key.

But, I cannot set the focus on the first row of that table when the page is loaded. It is evident that I always have to click on the first row inside the table before using the keyboard keys to move the highlighter down.

I used the JavaScript "focus()", it just does not work for me. I do not know what went wrong. And do I have alternatives such as using listener? How do I code to use a listener?

Please help.

var firstRow = 1;

var currentRow;

var highlightedRow;

window.onload = function()

{

var table = document.getElementById('countriesList:countryTable' );

var trs = table.getElementsByTagName('tr' );

highlightRow( trs[ firstRow ] );

trs[ firstRow ].focus();

currentRow = trs[ firstRow ].rowIndex;

}

Message was edited by:

jiapei_jen

[1379 byte] By [jiapei_jena] at [2007-11-27 9:49:40]