javascript - 带输入的 td 中的 Jquery 表导航

Question

我有一个表格，其中指定的单元格包含输入。并非所有单元格中都有输入(!)。

如何使用左右键在此表中导航键盘？

示例 - 如果我在值为 5 的单元格中按“左”键 - 我需要关注值为 4 的单元格，然后按 - 到值为 3 的单元格，等等。

<table class='mytable'>
   <tr>
       <td><input type='text' value='1'></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       <td><input type='text' value='2'></td>
       <td>same text..</td>
       <td><input type='text' value='3'></td>
   </tr>
   <tr>
       <td><input type='text' value='4'></td>
       <td><input type='text' value='5'></td>
       <td>same text..</td>
   </tr>
</table>

我知道如何检测按键(例如keycode)。仅在正确选择器导航到表中的上一个单元格时出现问题(不是在行中 - 需要在所有表中导航，而仅在具有输入的单元格中导航)。

Answer 1

这样的事情怎么样？ http://jsfiddle.net/7jQCe/3/

HTML 示例:

    <table>
    <tr>
        <td><input type="text" data-value="1" class="btnClick" /></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" data-value="2" class="btnClick" /></td>
        <td>same text..</td>
        <td><input type="text" data-value="3" class="btnClick" /></td>
    </tr>
    <tr>
       <td><input type="text" data-value="4" class="btnClick"></td>
       <td><input type="text" data-value="5" class="btnClick"></td>
       <td>same text..</td>
   </tr>
   </table>

JS 与 jQuery:

$(".btnClick").keydown(function(e) {
  if(e.keyCode == 37) { // left
    var currentField = $(this).data("value");
        var currentTD = $(this).parent();
    var prevField = currentField - 1;
        var prevTD = $('*[data-value="'+prevField+'"]').parent();
            //Do something with the TD
        $('*[data-value="'+prevField+'"]').focus();
  }
  else if(e.keyCode == 39) { // right
    var currentField = $(this).data("value");
        var currentTD = $(this).parent();
    var nextField = currentField + 1;
        var prevTD = $('*[data-value="'+nextField+'"]').parent();
            //Do something with the TD
        $('*[data-value="'+nextField+'"]').focus();
  }
});