jQuery DataTable 按键

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();
});