JQuery таблица навигации в td с вводом

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> 

Я знаю, как ключ обнаружение нажмите (e. 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(); 
    } 
});