使用箭頭鍵在每個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演示