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