Using up and down arrow for table with vertical scroll

Question

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 is when I use the up/down arrow keys, and when I have a vertical scroll. When it comes to an end automatically returns to the first row.

I would like to stop selecting up when I'm on the first row and selecting rows down when I'm on the last row.

Also, the problem is that I have a vertical scrolling, selecting rows via the arrow is farewell as it should, because it automatically scrolls the div (example of how it should work selecting a row when table or div has vertical scroll http://dhtmlx.com/docs/products/dhtmlxGrid /)

Answer 1

The first function I have provided would really terse things up. Basically, the only difference between the two methods is whether next or prev is called, so the function accepts this value as an argument and works for both directions.

As far as the base functionality, it basically attempts to select the next or prev tr. If the element doesn't exist, it does nothing. If it does exist it just toggles the 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/

Answer 2

Use the below code:

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

this is working.