我想知道是否可以使用箭头键在我用 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;
    }
});
;

非常感谢任何提示或任何内容。 提前致谢， 失败

更新

看来我解释错了。再试一次: 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);

这就是我的结果。我敢打赌有更聪明的解决方案，但我现在想不出来。

非常感谢您的时间和精力。

最佳答案

这是一个允许以下操作的版本

1. 约束表格的开始和结束(表格的第一个和最后一个单元格)
2. 在每一行的末尾换行并移动到下一行
3. 如果需要滚动才能看到它，则将当前单元格滚动到 View 中
4. 支持鼠标点击选择单元格

演示地址:https://jsfiddle.net/BdVB9/

像这样的html结构

<table id="navigate">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</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;
    }
}

关于javascript - 使用箭头键导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3245398/