使用箭头键在每个td中使用输入文本导航HTML表

Question

我有一个HTML table ，每个td中都有输入文本。 我正在尝试创建一个允许箭头键导航我td's 。

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

在这里 编码

Answer 1

您可以获得价值。 在重新定位功能中使用以下代码：

alert($('#navigate tr td').eq(active).find('input').val());

Answer 2

您可以单独查找输入，并在function rePosition()向Active输入添加类，如下所示：

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

这里的旧演示

更新资料

如前所述，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
}

更新的演示

更新-2：

与thead演示