javascript - 使用箭头键在每个 td 中导航带有输入文本的 HTML 表格

Question

我有一个 HTML 表格，每个 td 中都有输入文本。我正在尝试创建一个允许箭头键导航我的 td 的函数。

我想在单击每个箭头键时突出显示所选单元格的值，就像选项卡的工作方式一样。这里有人知道如何实现这一目标吗？谢谢。

代码 Here

Answer 1

可以单独找到input，在function rePosition()中给Active input添加一个class，

$('#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

更新

正如 Op 提到的另一个问题，是只删除选定的文本。
您需要添加对 keydown 事件的检查，

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

更新 - 2:

Demo with thead