使用箭头键导航时跳过表格单元格

Question

我正在尝试创建一个原型，以使用表格布局和仅使用箭头键的导航来测试电视界面（模拟D键）。我发现这个示例 http://jsfiddle.net/BdVB9/允许使用所有四个键进行导航，但我也在尝试合并将类应用于单元格的功能，这将强制导航跳过没有该类的单元格。我创建了一些使用左右箭头跳过的东西，但似乎无法上下移动。

在此处查看代码： http://jsfiddle.net/matternst/Hk3Pu/

任何帮助将不胜感激。

var index = 0;
$(document).keydown(function(e) {
    var rows = $('#navigate tr').length;
    if (e.keyCode === 39) { //move left or wrap
        index = (index + 1 >= $('td.can_be_selected').length) ? $('td.can_be_selected').length - 1 : index + 1;
        $('td.can_be_selected').removeClass('selected');
        $('td.can_be_selected:eq(' + index + ')').addClass('selected');
        return false;
    }
    if (e.keyCode === 37) { // move right or wrap
        index = (index == 0) ? 0 : index - 1;
        $('td.can_be_selected').removeClass('selected');
        $('td.can_be_selected:eq(' + index + ')').addClass('selected');
        return false;
    }
    if (e.keyCode === 38) {  // move up
    }
    if (e.keyCode === 40) { // move down
    }
});

Answer 1

所以我用这段代码添加了向上和向下按键：

if (e.keyCode === 38) {  // move up
    index -= columns;
    if (index < 0) {
        index += maxCellIndex;
    }
    while( !$('#navigate tr td:eq(' + (index) + ')').hasClass('can_be_selected') ) {
        if (index < 0) {
            // wrap both ways:
            index += maxCellIndex;
        } else {
            index -= columns;
        }
    }
}
if (e.keyCode === 40) { // move down
    index += columns;
    if (index >= maxCellIndex) {
        index -= maxCellIndex;
    }
    while( !$('#navigate tr td:eq(' + (index) + ')').hasClass('can_be_selected') ) {
        if (index >= maxCellIndex) {
            // wrap both ways:
            index -= maxCellIndex;
        } else {
            index += columns;
        }
    }
}
$('#navigate tr td:eq(' + index + ')').addClass('selected');

笔记：

1. 我还更改了您的代码以向左/向右移动。
2. 我看到所选框如何在左侧/右侧换行到下一行[向上/向下]，但我没有将其添加到向上/向下。这很容易完成，所以让我知道这是否是你想要的。
3. 这是更新的小提琴。

希望这是有帮助的！