如何使用JQuery使用Tab键在表格单元格中导航？

Question

我有一张桌子如下图所示.当我单击一个表格单元格(只有带有div元素的单元格)时,它会变成一个文本字段进行编辑(我正在做另一个Jquery插件).我试图使用tab键来实现这一点,也就是当我从一个单元格中输出时,我想转到下一个单元格.

<table id="mytable">
   <tr> 
          <td><span><div>60</div></span></td> 
          <td><span>$10000</span></td>
          <td><span><div>100%</div></span></td>
   </tr>
</table>

这是我的Jquery代码.这段代码工作不正常,就是当我从第一个单元格中拔出时,我可以在下一个单元格中看到光标,但它立即消失了.这段代码有什么不对吗？

$("#mytable tr td div").bind('keydown', function(event) {
  if(event.keyCode == 9){ //for tab key
    var currentDiv = event.target;
    $(currentDiv).parents("td").next("td").find("div").click();
}});

Answer 1

添加return false;可能有帮助:

$("#mytable tr td div").bind('keydown', function(event) {
  if(event.keyCode == 9){ //for tab key
    var currentDiv = event.target;
    $(currentDiv).parents("td").next("td").find("div").click();
    return false; // <== here
  }
});

添加它意味着如果你正在处理keydown,你告诉浏览器阻止事件冒泡并停止事件的默认处理,这可能会干扰你正在尝试做的事情.