set focus to element inside <td>, set focus to element inside <td> Options

[sakhi]

I have a html table in my web page, and this table contains some input elements (like text box, btton etc) as cell data. I have implemeted a functionality to navigate through each cell by arrow keys. Now i want to set the focus to the cell data (button or textbox) with arrow key navigation.

html table code snippet -


<td id="testTd"><input id="testButton" type="button" value="test" onclick="alert('test clicked!!')"/></td>

While navigating through keyboard i get the id of button but when i try to set focus, it does not seem to be working

javascript code snippet -

var td = tabMatrix[rmove][cmove].firstChild;
alert(td.id); // here i get the id of button
var button = document.getElementById(td.id);
button.focus;

any help or pointers would be of great help.

[raphael75]

I have a html table in my web page, and this table contains some input elements (like text box, btton etc) as cell data. I have implemeted a functionality to navigate through each cell by arrow keys. Now i want to set the focus to the cell data (button or textbox) with arrow key navigation.

html table code snippet -


<td id="testTd"><input id="testButton" type="button" value="test" onclick="alert('test clicked!!')"/></td>

While navigating through keyboard i get the id of button but when i try to set focus, it does not seem to be working

javascript code snippet -

var td = tabMatrix[rmove][cmove].firstChild;
alert(td.id); // here i get the id of button
var button = document.getElementById(td.id);
button.focus;

any help or pointers would be of great help.

Try button.focus();

[Christian J]

var td = tabMatrix[rmove][cmove].firstChild;

alert(td.id); // here i get the id of button
var button = document.getElementById(td.id);

The above just seems to give the variable "button" the same value as the cell ID. Anyway you shouldn't need the button ID. Try this instead:

CODE

var button = td.getElementByTagName('input')[0];

You can also use

CODE

var button = td.firstChild;

but only if there's no whitespace or code formatting before the INPUT element.

Also use focus(); like raphael75 wrote.

BTW the Opera browser has a similar keyboard navigation functionality.