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 with 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();
  }
});

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

带输入的td中的Jquery表导航

2 个答案: