Пропуск ячеек таблицы при навигации с помощью клавиш со стрелками

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. Вот обновленная Скрипка.

Надеюсь, это полезно!