x'tian x'tian - 8 months ago 38
ASP.NET (C#) Question

Navigate HTML table with input text in every td using arrow key

I have an

HTML table
with input text in every
. I'm trying to create a function that will allow arrow keys to navigate my

I want to highlight the value of the selected cell when every arrow key is clicked, just like how tab works. Does anyone here have an idea how to achieve this? Thank you.

Code Here


You can find input separately, and add a class to Active input in function rePosition() as,

$('#navigate tr td').find('input').removeClass('yourClassforText');
$('#navigate tr td').eq(active).find('input').addClass('yourClassforText');

// to select text inside input
$('#navigate tr td').eq(active).find('input').select();

old Demo Here


As mentioned another problem by Op, is to remove only selected text.
You need to add a check on a keydown event as,

var inp = String.fromCharCode(event.keyCode);
if (!(/[a-zA-Z0-9-_ ]/.test(inp) || event.keyCode == 96)){
    //if user is entering some text, neglect rePosition & reCalculate events

Updated Demo