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>

带有 jQ​​uery 的 JS：

$(".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();
  }
});

Answer 2

这是最好的解决方案

 $('table.arrow-nav').keydown(function(e){
var $table = $(this);
var $active = $('input:focus,select:focus',$table);
var $next = null;
var focusableQuery = 'input:visible,select:visible,textarea:visible';
var position = parseInt( $active.closest('td').index()) + 1;
console.log('position :',position);
switch(e.keyCode){
    case 37: // <Left>
        $next = $active.parent('td').prev().find(focusableQuery);   
        break;
    case 38: // <Up>                    
        $next = $active
            .closest('tr')
            .prev()                
            .find('td:nth-child(' + position + ')')
            .find(focusableQuery)
        ;
        
        break;
    case 39: // <Right>
        $next = $active.closest('td').next().find(focusableQuery);            
        break;
    case 40: // <Down>
        $next = $active
            .closest('tr')
            .next()                
            .find('td:nth-child(' + position + ')')
            .find(focusableQuery)
        ;
        break;
}       
if($next && $next.length)
{        
    $next.focus();
}

有关更多详细信息，请参阅它取自此处

https://gist.github.com/krcourville/7309218