CODEWITHSUNDEEP
javascriptarrow-keysvertical-scroll
Marko S
Marko S

Reputation: 5307

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

Upvotes: 2

Views: 5456

Answers (2)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

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/

Upvotes: 2

Code Lღver
Code Lღver

Reputation: 15603

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.

Upvotes: 1

Related Questions