javascript - Using up and down arrow for table with vertical scroll -

i create fiddle:

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

the problem when use up/down arrow keys, , when have vertical scroll. when comes end automatically returns first row.

i stop selecting when i'm on first row , selecting rows down when i'm on last row.

also, problem have vertical scrolling, selecting rows via arrow farewell should, because automatically scrolls div (example of how should work selecting row when table or div has vertical scroll http://dhtmlx.com/docs/products/dhtmlxgrid /)

the first function have provided terse things up. basically, difference between 2 methods whether next or prev called, function accepts value argument , works both directions.

as far base functionality, attempts select next or prev tr. if element doesn't exist, nothing. if exist toggles classes.

javascript method 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");     } }); 

working example: http://jsfiddle.net/7tmjc/4/

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

working example: http://jsfiddle.net/7tmjc/3/