Come selezionare la colonna delle righe successiva e precedente, in caso di evento keydown

Considera che io sia sull’nima riga e sulla n-esima colonna (xyz1), quando premo ‘giù il tasto freccia’ dovrebbe cambiare il colore di sfondo della successiva colonna n-esima, allo stesso modo quando premo ‘Freccia su’, dovrebbe cambiare il colore di sfondo della riga n-esima delle righe precedenti.

Ho provato ma il colore di sfondo non si applica, cosa devo fare?

HTML ::

div class="row col-md-10"> 
Name
adress
phone
email
{{da}}
{{db}}
{{dc}}
{{dd}}

Direttiva angular:

 sidapp.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'); $(target).next().css('background-color', 'red'); //event.preventDefault(); }else if(event.which === 37){ var target = $(event.target).prev(); $(target).trigger('focus'); console.log($(target)); $(target).prev().css('background-color', 'green'); }else if(event.which === 40){ var target = $(event.target).parent().siblings('div').eq(parseInt(attrs.inx)); $(target).eq(0).css('background-color', 'blue'); console.log( $(event.target)); console.log(target); } }); }; }); 

inserisci la descrizione dell'immagine qui

Esempio di lavoro per tabelle HTML

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

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

Alla fine ho risolto usando 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'); } }); }; });