JQuery DataTable Keydown

Question

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

例如，以下代码不起作用：

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

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

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

我可以使用$（文档）捕获keydown，但这是不可取的。

感谢。

Answer 1

这是一个有效的解决方案...代码可以清理一下（并且有错误，例如没有限制检查），但效果是：

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

'key'为表格提供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();
});