我想知道是否有可能使用箭头键导航我使用JS创建的表(使用jQuery)?我的意思是从一个单元格跳到另一个单元格......该脚本适用于Greasemonkey。
然而,警报有效。我根本不知道如何让它运作良好。
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "left pressed " );
return false;
}
if (e.keyCode == 38) {
alert( "up pressed " );
return false;
}
if (e.keyCode == 39) {
alert( "right pressed " );
return false;
}
if (e.keyCode == 40) {
alert( "down pressed " );
return false;
}
});
;
任何提示或其他任何非常感谢。 提前致谢, Faili
更新
好像我解释自己错了。再试一次: Demo
这个可以让你知道我想要什么。选择一个输入字段后,可以使用箭头键导航。 我的问题是我无法通过GM和jQuery实现它。有什么想法吗?
再次感谢您的时间和精力。
终于就像:
function myTest_analysis1(e,leftkey,up,right,down){
myTest(e,'','','field_analysis2','field_communication1')
function myTest(e,leftkey,up,right,down)
{
if (!e) e=window.event;
var selectArrowKey;
switch(e.keyCode)
{
case 37:
// Key left.
selectArrowKey = leftkey;
break;
case 38:
// Key up.
selectArrowKey = up;
break;
case 39:
// Key right.
selectArrowKey = right;
break;
case 40:
// Key down.
selectArrowKey = down;
break;
}
if (!selectArrowKey) return;
var controls = window.document.getElementById(selectArrowKey);
if (!controls) return;
controls.focus();
}
}
$('#field_analysis1').keydown (myTest_analysis1);
这就是我的成功之道。我敢打赌,有一个更聪明的解决方案,但我现在无法理解。
非常感谢你的时间和精力。
答案 0 :(得分:21)
这是一个允许以下
的版本使用像
这样的html结构<table id="navigate">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
和javascript
var active = 0;
$(document).keydown(function(e){
reCalculate(e);
rePosition();
return false;
});
$('td').click(function(){
active = $(this).closest('table').find('td').index(this);
rePosition();
});
function reCalculate(e){
var rows = $('#navigate tr').length;
var columns = $('#navigate tr:eq(0) td').length;
//alert(columns + 'x' + rows);
if (e.keyCode == 37) { //move left or wrap
active = (active>0)?active-1:active;
}
if (e.keyCode == 38) { // move up
active = (active-columns>=0)?active-columns:active;
}
if (e.keyCode == 39) { // move right or wrap
active = (active<(columns*rows)-1)?active+1:active;
}
if (e.keyCode == 40) { // move down
active = (active+columns<=(rows*columns)-1)?active+columns:active;
}
}
function rePosition(){
$('.active').removeClass('active');
$('#navigate tr td').eq(active).addClass('active');
scrollInView();
}
function scrollInView(){
var target = $('#navigate tr td:eq('+active+')');
if (target.length)
{
var top = target.offset().top;
$('html,body').stop().animate({scrollTop: top-100}, 400);
return false;
}
}
答案 1 :(得分:11)
你应该能够聚焦各种细胞,我将使用.focus()
将一个例子放在一起以下是示例。
请记住......
a)此示例中没有任何内容可以阻止您越界,您需要将currentRow和currentCell的值限制为单元格数量,并防止它们低于0。
b)目前,没有代码可以删除绿色文本,这是我用来显示当前焦点的内容。这意味着留下了一条绿色小道。
你可以相当容易地解决上述两个问题,但它们会让这个例子变得更加复杂......
var currentRow = 0;
var currentCell = 0;
function ChangeCurrentCell() {
var tableRow = document.getElementsByTagName("tr")[currentRow];
var tableCell = tableRow.childNodes[currentCell];
tableCell.focus();
tableCell.style.color = "Green";
}
ChangeCurrentCell();
$(document).keydown(function(e){
if (e.keyCode == 37) {
currentCell--;
ChangeCurrentCell();
return false;
}
if (e.keyCode == 38) {
currentRow--;
ChangeCurrentCell();
return false;
}
if (e.keyCode == 39) {
currentCell++;
ChangeCurrentCell();
return false;
}
if (e.keyCode == 40) {
currentRow++;
ChangeCurrentCell();
return false;
}
});
答案 2 :(得分:10)
这是我的版本......
var active;
$(document).keydown(function(e){
active = $('td.active').removeClass('active');
var x = active.index();
var y = active.closest('tr').index();
if (e.keyCode == 37) {
x--;
}
if (e.keyCode == 38) {
y--;
}
if (e.keyCode == 39) {
x++
}
if (e.keyCode == 40) {
y++
}
active = $('tr').eq(y).find('td').eq(x).addClass('active');
});