This week's giveaway is in the Testing forum.
We're giving away four copies of TDD for a Shopping Website LiveProject and have Steven Solomon on-line!
See this thread for details.
Win a copy of TDD for a Shopping Website LiveProject this week in the Testing forum!
    Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Jeanne Boyarsky
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • paul wheaton
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Carey Brown
  • Frits Walraven
Bartenders:
  • Piet Souris
  • Himai Minh

Setting focus to table cell element

 
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator
Hi,
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" >
<tbody>
<tr id="i1_0" >
<td style="color: "><input type="button" value="test" id="testButton"></td>
<td>0-2</td>
<td>0-3</td>
<td>0-4</td>
</tr>
<tr id="i1_1">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
</tbody>
</table>


//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].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.
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?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator
Do not double post.

https://coderanch.com/t/489413/HTML-JavaScript/Traversing-table-using-arrow-keys

Eric
 
Straws are for suckers. Now suck on this tiny ad!
Free, earth friendly heat - from the CodeRanch trailboss
https://www.kickstarter.com/projects/paulwheaton/free-heat
    Bookmark Topic Watch Topic
  • New Topic