如何在keydown事件中选择下一行和上一行

Question

考虑到我在第 n 行和第 n 列 (xyz1)，当我按下“向下箭头键”时，它应该更改下一行第 n 列的背景颜色，同样当我按下“向上箭头键”时它应该改变前行第n列的背景颜色。

我试过了，但是背景颜色不适用，我需要做什么？

HTML::

 div class="row col-md-10">
 <div class="col-md-3 " style="background-color: #dedef8" >Name</div>
 <div class='col-md-3' style="background-color: #dedef8">adress</div>
 <div class='col-md-3' style="background-color: #dedef8">phone</div>
 <div class='col-md-3' style="background-color: #dedef8">email</div>
</div>
<div class="row col-md-10">
<div  ng-repeat='d in data' ng-init="sectionIndex = $index">
  <div class='col-md-3' ng-keydown="IamDowm($event)" style="background-color: #dedec2" focus ng-enter inx='{{sectionIndex}}'   tabindex="-1">{{d.a}}</div>
  <div class='col-md-3' ng-keydown="IamDowm($event)" style="background-color: #dedec2" focus ng-enter  inx='{{sectionIndex}}' tabindex="-1">{{d.b}}</div>
  <div class='col-md-3'  ng-keydown="IamDowm($event)"style="background-color: #dedec2" focus  ng-enter  inx='{{sectionIndex}}' tabindex="-1">{{d.c}}</div>
  <div class='col-md-3'ng-keydown="IamDowm($event)"  style="background-color: #dedec2" focus ng-enter  inx='{{sectionIndex}}' tabindex="-1">{{d.d}}</div>

角度指令：

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

Answer 1

最后我用 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');
            }
        });
    };
});

Answer 2

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

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