Using up and down arrow for table with vertical scroll

Question

I create fiddle:

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 /)

Kevin Bowersox · Accepted Answer · 2013-07-18T09:24:40.487

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/

this is great...only notice that for example when I add more rows and use up and down arrows scroll is in focus not row...how to do that.. — Marko S, Jul 18 '13 at 09:35
to be precise...how can I scroll to the top active row although table has vertical scroll...or I put link example to dhtmlxgrid where focus is on row not on vertical scroll when use up/down arrow — Marko S, Jul 19 '13 at 07:47

score 1 · Answer 2 · answered Jul 18 '13 at 09:09

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.

Using up and down arrow for table with vertical scroll

2 Answers2