使用箭头键进行导航
我想知道是否有可能使用箭头键导航我用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
更新
好像我解释自己错了。 再试一次： 演示
这个可能会让你知道我想要什么。 选择一个输入字段后，可以使用箭头键进行导航。 我的问题是我无法通过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）{案例37：//键左。 selectArrowKey = leftkey; 打破; 案例38：//关键。 selectArrowKey = up; 打破; 案例39：//键右。 selectArrowKey = right; 打破; 案例40：//按下键。 selectArrowKey = down; 打破; } if（！selectArrowKey）返回;
var controls = window.document.getElementById（selectArrowKey）; if（！controls）返回; controls.focus（）; $（’＃field_analysis1’）。keydown（myTest_analysis1）; 这就是我的成功之道。 我打赌有一个更聪明的解决方案，但我现在无法理解。
非常感谢您的时间和精力。
你应该能够聚焦各种细胞，我将使用.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; } });
这是一个允许以下内容的版本
- 约束表的开始和结束（表的第一个和最后一个单元格）
- 包裹在每行的末尾并移动到下一行
- 如果需要滚动才能将当前单元格滚动到视图中
- 支持鼠标单击以选择单元格
演示 ： http ： //jsfiddle.net/BdVB9/
像html结构一样
和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; } }
这是我的版本……
演示
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'); });