How To Select Next & Previous Rows Column,on Keydown Event

Consider I am on the nth row & n-th column(xyz1), when I press 'down arrow key' it should change the background color of next rows n-th column, similarly when i press 'Up arrow

Solution 1:

Working Example FOR HTML TABLES

http://codepen.io/anon/pen/raypzm

$('table#hi tbody tr').first().addClass('red');

$(document).keyup(function(event) {
    var pressed = event.key;

    if (pressed == 'Down') {
        var lastCheck = $('table#hi tbody tr').last().hasClass('red');
        if (lastCheck) return;
        else $('table#hi tbody tr.red').removeClass('red').next().addClass('red');
    }

    if (pressed == 'Up') {
        var firstCheck = $('table#hi tbody tr').first().hasClass('red');
        if (firstCheck) return;
        else $('table#hi tbody tr.red').removeClass('red').prev().addClass('red');
    }
});

Example For DIVS

http://codepen.io/anon/pen/emvPwx

$('div#hi div').first().addClass('red');

$(document).keyup(function(event) {
    var pressed = event.key;

    if (pressed == 'Down') {
        var lastCheck = $('div#hi div').last().hasClass('red');
        if (lastCheck) return;
        else $('div#hi div.red').removeClass('red').next().addClass('red');
    }

    if (pressed == 'Up') {
        var firstCheck = $('div#hi div').first().hasClass('red');
        if (firstCheck) return;
        else $('div#hi div.red').removeClass('red').prev().addClass('red');
    }
});

Solution 2:

Finally I fixed by using chidren().eq('colNumber')

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {

            if(event.which === 39) {
                 var target = $(event.target).next();
                $(target).trigger('focus');
                //event.preventDefault();
            }else if(event.which === 37){
                   var target = $(event.target).prev();
                $(target).trigger('focus');

                 //  $(target).prev().css('background-color', 'green');
            }else if(event.which === 40){
                var target = $(event.target).parent();
                $(target).next().children().eq($(event.target)[0].id).focus();
                //$(target).next().children().eq($(event.target)[0].id).css('background-color', 'blue');

            } else if(event.which === 38){
                var target = $(event.target).parent();
                $(target).prev().children().eq($(event.target)[0].id).focus();
                //$(target).prev().children().eq($(event.target)[0].id).css('background-color', 'yellow');
            }
        });
    };
});