JQuery 数据表 Keydown

Question

我在使用 JQuery DataTable 捕获 keydown 事件时遇到问题。我的目标是允许用户使用箭头键导航表的行。因此，当用户按下箭头键时，我想捕获 keydown 事件并移动表的选定行(这是我使用选定行的类在数据表外部跟踪的内容)。但是，我似乎无法捕获 keydown 事件。

例如，下面的代码不起作用:

$('#myTable tbody').keydown(function (event){...});

我的想法是问题是表格没有焦点，但也许这是错误的路径。例如，即使我添加以下内容，我也不会使用上面的代码捕获 keydown 事件:

 $('#myTable tbody').click(function(e){ $('#myTable tbody').focus();});

我可以用 $(document) 捕获 keydown，但这是不可取的。

谢谢。

Answer 1

这是一个可行的解决方案...代码可以清理一下(并且存在错误，例如没有限制检查)，但效果是存在的:

http://jsfiddle.net/BLSully/Xdkea/

“关键”是为表提供一个 tabindex，以便它变得“可聚焦”。它不需要为零，但它需要是“某物”，以便按键事件对其起作用

<table id="myTable" tabindex=0>
    <tbody>
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
        <tr><td>Row 4</td></tr>
        <tr><td>Row 5</td></tr>
    </tbody>
</table>

JavaScript:

$(function(){
    var focusedRow = null;
    $('#myTable').on('keydown', function(ev){
        console.log(ev.keyCode);
        if(focusedRow == null) {
            focusedRow = $('tr:nth-child(1)', '#myTable');
        } else if(ev.keyCode === 38) {
            focusedRow.toggleClass('focused');
            focusedRow = focusedRow.prev('tr');
        } else if(ev.keyCode === 40) {
            focusedRow.toggleClass('focused');
            focusedRow = focusedRow.next('tr');
        }
        focusedRow.toggleClass('focused');
    });
    $('#myTable').focus();
});