如何选择下一个＆放大器; previous行列，在keydown事件 [英] How to select next & previous rows column,on keydown event

问题描述

考虑我在第n行＆安培;第n列（XYZ1），当我preSS'向下箭头键就应该改变下一行的背景颜色第n列，同样当我preSS向上箭头键就应该改变背景previous行的颜色第n列。

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 key' it should change the background color of previous rows n-th column.

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

I tried but background color is not applying, what i need to do ?

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

推荐答案

最后我固定使用chidren（）。EQ（'colNumber'）

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

这篇关于如何选择下一个＆放大器; previous行列，在keydown事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！