Использование стрелок вверх и вниз для таблицы с вертикальной прокрутки

Question

создать скрипку:

http://jsfiddle.net/marko4286/7TmJc/

function arrowUp() { 
    var activeTableRow = $('.table tbody tr.active').removeClass('active').first(); 
    if (activeTableRow.length) { 
     activeTableRow.prev().addClass('active'); 
    } else { 
     $('.table tbody').children().last().addClass('active'); 
    } 
}; 
function arrowDown() { 
    var activeTableRow = $('.table tbody tr.active').removeClass('active').first(); 
    if (activeTableRow.length) { 
     activeTableRow.next().addClass('active'); 
    } else { 
     $('.table tbody').children().first().addClass('active'); 
    } 
}; 


$(window).keydown(function (key) { 
    if (key.keyCode == 38) { 
     arrowUp(); 
    } 
    if (key.keyCode == 40) { 
     arrowDown(); 
    } 
}); 

Проблема заключается в том, когда я использую клавиши со стрелками вверх/вниз, и когда у меня есть вертикальная полоса прокрутки. Когда дело доходит до конца, автоматически возвращается в первую строку.

Я хотел бы прекратить выбирать, когда я нахожусь в первом ряду и выбираю строки, когда я нахожусь в последней строке.

Кроме того, проблема заключается в том, что у меня есть вертикальная прокрутка, выбор строк по стрелке прощается так, как должен, потому что он автоматически прокручивает div (пример того, как он должен работать, выбирая строку, когда таблица или div имеют вертикальную прокрутку http://dhtmlx.com/docs/products/dhtmlxGrid /)

Answer 1

Первая функция, которую я предоставил, будет действительно очень сложной. В принципе, единственная разница между этими двумя методами заключается в том, вызывается ли next или prev, поэтому функция принимает это значение как аргумент и работает для обоих направлений.

Что касается базовой функциональности, она в основном пытается выбрать следующий или предыдущий tr. Если элемент не существует, он ничего не делает. Если он существует, он просто переключает классы.

Мусор Метод 0

function arrow(dir) { 
    var activeTableRow = $('.table tbody tr.active')[dir](".table tbody tr"); 
    if (activeTableRow.length) { 
     $('.table tbody tr.active').removeClass("active"); 
     activeTableRow.addClass('active'); 
    } 
}; 

$(window).keydown(function (key) { 
    if (key.keyCode == 38) { 
     arrow("prev"); 
    } 
    if (key.keyCode == 40) { 
     arrow("next"); 
    } 
}); 

Рабочий пример:http://jsfiddle.net/7TmJc/4/

Метод Java-1

function arrowUp() { 
     var activeTableRow = $('.table tbody tr.active').prev(".table tbody tr"); 
     if (activeTableRow.length) { 
      $('.table tbody tr.active').removeClass("active"); 
      activeTableRow.addClass('active'); 
     } 
    }; 
    function arrowDown() { 
     var activeTableRow = $('.table tbody tr.active').next(".table tbody tr"); 
     if (activeTableRow.length) { 
      $('.table tbody tr.active').removeClass("active"); 
      activeTableRow.addClass('active'); 
     } 
    }; 


    $(window).keydown(function (key) { 
     if (key.keyCode == 38) { 
      arrowUp(); 
     } 
     if (key.keyCode == 40) { 
      arrowDown(); 
     } 
    }); 

Рабочий пример:http://jsfiddle.net/7TmJc/3/

Answer 2

Используйте следующий код:

function arrowUp() { 
    if(!$(".table tbody tr").first().hasClass('active')){ 
    var activeTableRow = $('.table tbody tr.active').removeClass('active').first(); 
    if (activeTableRow.length) { 
     activeTableRow.prev().addClass('active'); 
    } else { 
     $('.table tbody').children().last().addClass('active'); 
    } 
    } 
}; 
function arrowDown() { 
    if(!$(".table tbody tr").last().hasClass('active')){ 
    var activeTableRow = $('.table tbody tr.active').removeClass('active').first(); 
    if (activeTableRow.length) { 
     activeTableRow.next().addClass('active'); 
    } else { 
     $('.table tbody').children().first().addClass('active'); 
    } 
    } 
}; 

это работает.