Bookmark Topic Watch Topic
  • New Topic

Setting focus to table cell element  RSS feed

Swapna Agde
Posts: 6
  • Mark post as helpful
  • send pies
  • Report post to moderator
I want to traverse the html table using arrow keys(left,right,up,down). Using arrow keys I am able to traverse.
However I am not able to set a focus to the alement inside the cell.
Following is the code:

<table class="tableExample" id="tableExample1" style="color: #6898c8" >
<tr id="i1_0" >
<td style="color: "><input type="button" value="test" id="testButton"></td>
<tr id="i1_1">

//I am populating the table data in a 2x2 matrix and trying to set focus to the element in first cell:

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;

// Now selecting the first cell:

tabMatrix[0][0].className = "selected";
this.selectedId = tabMatrix[0][0];
var curr = tabMatrix[0][0];

//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.
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.
Please help me how to do this?
Eric Pascarello
Posts: 15385
    Bookmark Topic Watch Topic
  • New Topic
Boost this thread!