x'tian x'tian - 1 month ago 6
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
td
. I'm trying to create a function that will allow arrow keys to navigate my
td's
.

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

Answer

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

Update

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