jquery - JQueryDataTableキーダウン

Question

JQueryDataTableを使用してキーダウンイベントをキャプチャするのに問題があります。私の目標は、ユーザーが矢印キーを使用してテーブルの行をナビゲートできるようにすることです。したがって、ユーザーが矢印キーを押したときに、キーダウンイベントをキャッチし、テーブルの選択された行（これは、選択された行のクラスを使用してデータテーブルの外部で追跡しているものです）を移動したいと思います。しかし、キーダウンイベントをキャッチできないようです。

たとえば、次のコードは機能しません。

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

私の考えでは、問題はテーブルに焦点が合っていないことですが、おそらくこれは間違った道です。たとえば、以下を追加しても、上記のコードではキーダウンイベントをキャッチしません。

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

$（document）でキーダウンをキャッチできますが、これは望ましくありません。

ありがとう。

Answer 1

これが実用的な解決策です...コードは少しクリーンアップされる可能性があります（そしてバグがあります、例えば制限チェックがありません）が、効果はそこにあります：

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

「キー」はテーブルにタブインデックスを与えるので、「フォーカス可能」になります。ゼロである必要はありませんが、キー押下イベントが機能するように「何か」である必要があります

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