Traversing the table using arrow keys

[Swapna Agde]

Hi,
I want to traverse each cell of the table using arrow keys(left, right, up, down). I am able to move the highlighter to each cell as I press the arrow keys.
However I am not able to transfer the focus to each cell. Only the highlighter is moved, but focus remains on the same position where it was initially on page load.
Here is the code snippet:

<table class="tableEx" id="table1"  >
  <tr id="row0" >
    <td ><input type="button" value="test" id="testButton"></td>
    <td>row0-2</td>
    <td>row0-3</td>
    <td>row0-4</td>
  </tr>
  <tr id="row1">
    <td>row1-1</td>
    <td>row1-2</td>
    <td>row1-3</td>
    <td>row1-4</td>
  </tr>
  <tr id="row2">
    <td>row2-1</td>
    <td>row2-2</td>
    <td>row2-3</td>
    <td>row2-4</td>
  </tr>
  <tr id="row3">
    <td>row3-1</td>
    <td>row3-2</td>
    <td>row3-3</td>
    <td>row3-4</td>
  </tr>
  <tr id="row4">
    <td>row4-1</td>
    <td>row4-2</td>
    <td>row4-3</td>
    <td>row4-4</td>
  </tr>
  <tr id="row5">
    <td>row5-1</td>
    <td>row5-2</td>
    <td>row5-3</td>
    <td>row5-4</td>
  </tr> 
</table>

On page load I am populating the table data in a 2X2 matrix and setting focus to first cell of the table.

                [i]for(var i=0; i<noRows; i++)
    	{
    		var row = elemTable.getElementsByTagName("tr")[i];
    		for(j=0; j<noCols; j++)
    		{
    			var col = row.getElementsByTagName("td")[j];
    			tabMatrix[i][j]= col;
    		}
    	}[/i]   	
               [i]tabMatrix[0][0].className = "selected";
    	this.selectedId = tabMatrix[0][0];
  
    	[b]tabMatrix[0][0].focus();[/b][/i]
</code>
[b]Now on every arrow keypress event I want to transfer the focus to that particular cell:[/b]
<code>
[i]function getCellPosition(){
   	var traverseId = this.selectedId;
 	
 	for(var i=0; i><noRows; i++)
 	{
 		for(var j=0; j><noCols; j++)
 		{
 			if(tabMatrix[i][j]==traverseId)
 			{
 				rmove = i;
 				cmove = j;
 				break;
 			}
 		}
 	}
 	traverseId=null;  	
  }[/i]

[i]function selectUp(dir){
    
   	getCellPosition();
 	
  	if(rmove!=0){
 		tabMatrix[rmove][cmove].className = tabMatrix[rmove][cmove].defaultClassName;
 		rmove = rmove-1;
 	}
 		
    tabMatrix[rmove][cmove].className = "selected";
    this.selectedId = tabMatrix[rmove][cmove];
   [b] tabMatrix[rmove][cmove].focus();[/b]
    rmove=null; cmove=null;
    
  }[/i]

However this ".focus" is not working here. Please can anybody tell how to transfer the focus?>

[Eric Pascarello]

Please read this: UseCodeTags

Eric

[Eric Pascarello]

Table cells can not be focused. What are trying to accomplish by focusing the cell?

Eric

[Swapna Agde]

Sorry for the inconvience caused. I am new to posting help on forums. So kinda got messed up.
Anyway, I am able to focus the cell.
I want to set a focus to the element in the cell i.e button in this case, so that when user hits enter key in particular cell then the desired action is performed.
// for selecting the first cell, I have written following code:

tabMatrix[0][0].className = "selected"; 
this.selectedId = tabMatrix[0][0]; 
var curr = tabMatrix[0][0].firstChild.id; 
alert(curr); 
curr.focus(); 

//here curr.focus doesn't work. If I say tabMatrix[0][0].focus then the focus is set to the cell but not the element in the cell.

[Eric Pascarello]

Code tags use square brackets [ not angled brackets <

Eric

[Eric Pascarello]

Your code is

//Grabbing the id which is a string
var curr = tabMatrix[0][0].firstChild.id;
//alerting the string
alert(curr);
//trying to run a focus method on a string
curr.focus(); 

See a problem there?

Eric

[Swapna Agde]

Thanks for the reply. I got the problem.
I modified the code as follows:

var curr = tabMatrix[0][0].firstChild.id;
var currEle = document.getElementById(curr);
currEle.focus();

Now I am able to set a focus to the element in the cell.
Thanks once again.