如何使用键盘箭头键操作 jquery 数据表行答案

【问题标题】：How to Operate jquery datatable rows with keyboard arrow keys如何使用键盘箭头键操作 jquery 数据表行
【发布时间】：2011-04-29 13:12:48
【问题描述】：

如何使用键盘箭头键操作数据表（jquery 插件）行。我做了一些事情

var oTable;
    $("#customerdata tbody").click(function(event) {
            $(oTable.fnSettings().aoData).each(function (){
                    $(this.nTr).removeClass('row_selected');
            });
            var row = $(event.target.parentNode);
            row.addClass('row_selected');
            var custid=row.find('td:first').text();
            if(custid!="No data available in table"){
                $('#cust_id').val(custid);
            $('#customerdata_filter input').val('');
            $("#editmodal").dialog("close");}
    });        

    oTable = $("#customerdata").dataTable({
    "bJQueryUI": true,
            "bLengthChange": false,
            "bPaginate": false,
    "sPaginationType": "full_numbers",
            "bProcessing": true,
    "bServerSide": true,
            "sScrollY": "260px",
    "sAjaxSource": "/SrikanthTest/customer.do?type=showMinCustomerDetails"
});

但我不知道如何在行上操作光标。

【问题讨论】：

有一个你可能感兴趣的作者的插件，叫做 KeyTable sprymedia.co.uk/article/KeyTable

标签： jquery keyboard datatable navigation

【解决方案1】：

我认为您正在寻找类似的东西，但我需要更多的上下文来确定。

$(document).keydown(function (event) {
    switch(event.keyCode)
    {
        var currentRow = $(".row_selected").get(0);
        //arrow down
        case 40:
            $(currentRow).next().addClass("row_selected");
            $(currentRow).removeClass("row_selected");
            break;
        //arrow up
        case 38:
            $(currentRow).prev().addClass("row_selected");
            $(currentRow).removeClass("row_selected");
            break;

    }
});

【讨论】：

【解决方案2】：

我已经发布了一个示例，该示例也适用于动态加载的分页表 jQuery dataTables and selecting a row

但是，我使用 Tab 键来提高可用性。我相信很容易换一个。

【讨论】：