考虑我在第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>
Angular Directive:
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);
}
});
};
});
答案 0 :(得分:1)
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');
}
});
答案 1 :(得分: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');
}
});
};
});