Javascript中带键盘的可导航菜单

我有一个带有twitter引导的HTML表格

当我点击表格时，javascript获取一个id并用信息填充一个模式。大概是这样的：

$('.table > tbody > tr').click(function() {
   //lots of things happens
});

---

这很好，但我希望不仅能够单击，而且能够使用按钮导航（按下向下键将向下，按下向上键将向上一行）

---

如果您有任何建议，我们将不胜感激。

您可以捕获整个文档中的关键输入，并随意修改所需内容，以下是箭头键的基本模板。如果你需要其他钥匙，这里是一个有用的网站，让他们

---

您可以捕获整个文档中的关键输入并随意修改所需内容，以下是箭头键的基本模板。如果你需要其他钥匙，这里是一个有用的网站，让他们

---

首先，您需要使用函数包装代码，并从单击处理程序调用它：

var $table = $('.table'),
    $tableRows = $table.find('tbody > tr');

$tableRows.click(function() {
    rowToModal($(this));
});

function rowToModal($row) {
    $tableRows.removeClass('active-row');
    $row.addClass('active-row');

    //lots of things happens
}

然后，您可以为“keydown”事件创建处理程序：

---

首先，您需要使用函数包装代码，并从单击处理程序调用它：

var $table = $('.table'),
    $tableRows = $table.find('tbody > tr');

$tableRows.click(function() {
    rowToModal($(this));
});

function rowToModal($row) {
    $tableRows.removeClass('active-row');
    $row.addClass('active-row');

    //lots of things happens
}

然后，您可以为“keydown”事件创建处理程序：

---

e.keyCode

是一个

数字

，而不是

字符串

，因此比较它可能更好，因为

e.keyCode==38

。无论如何，

e.keyCode

已被弃用

e.key

或

e.code

应改为使用，这也使代码更容易理解。请记住，一些旧浏览器使用的是非标准代码，所以左边通常是

'LeftArrow'

，右边是

'RightArrow'

，但在IE上它只是

'left'

和

'right'

。另外，看一看。我将很快添加有关此类跨浏览器不兼容的信息

e.keyCode

是一个

数字

，而不是

字符串

，因此比较它可能更好，因为

e.keyCode==38

。无论如何，

e.keyCode

已被弃用

e.key

或

e.code

应改为使用，这也使代码更容易理解。请记住，一些旧浏览器使用的是非标准代码，所以左边通常是

'LeftArrow'

，右边是

'RightArrow'

，但在IE上它只是

'left'

和

'right'

。另外，看一看。我将很快添加有关此类跨浏览器不兼容的信息！

var $table = $('.table'),
    $tableRows = $table.find('tbody > tr');

$tableRows.click(function() {
    rowToModal($(this));
});

function rowToModal($row) {
    $tableRows.removeClass('active-row');
    $row.addClass('active-row');

    //lots of things happens
}

$(document).on('keydown', function(e) {
    if (/*check if modal is currently open*/ ) {
        var $currentRow = $($table.find('.active-row')),
            $nextRow;

        if (e.key == 'ArrowDown') {
            $nextRow = $currentRow.next();
        } else if (e.key == 'ArrowUp') {
            $nextRow = $currentRow.prev();
        }

        if ($nextRow && $nextRow.length) {
            rowToModal($nextRow );
        }
    }
});