如何使用 JQuery 使用 Tab 键浏览表格单元格？答案

【问题标题】：How to navigate through table cells with tab key using JQuery?如何使用 JQuery 使用 Tab 键浏览表格单元格？
【发布时间】：2011-05-17 03:32:34
【问题描述】：

我有一张如下图所示的表格。当我单击表格单元格（仅具有 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();
}});

【问题讨论】：

标签： jquery jquery-plugins jquery-selectors

【解决方案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，您是在告诉浏览器停止事件冒泡并停止事件的默认处理，这可能会干扰您尝试执行的操作.

【讨论】：