Jquery table navigation in td with input

Question

I have table, where specified cells contains inputs. Inputs not in all cells(!).

How I may navigate keyboard in this table with left-right keys?

Example - if i press 'left' in cell with value 5- I need focus on cell with value 4, next press- to cell with value 3, etc.

<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>

I know how detect key press(e.keycode). Problem only with correctly selector for navigate to previous cell in table(not in row- need navigate in all table, but only in cell with inputs).

Check this out - http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript. From there you can just do some css styling from you javascript depending on some logic. — pattmorter, Oct 24 '13 at 14:42

HenrikP · Answer 1 · 2013-10-25T08:43:10.193

How about something like this? http://jsfiddle.net/7jQCe/3/

HTML example:

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

Where table in you example? You answer wrong. Inputs not in . For you answer- may using simple next() or prev(). — Alexanrd D, Oct 24 '13 at 15:04
Then change the focus to parent() and you got your while it will ignore all the empty since it is only going through the parents of the input fields — HenrikP, Oct 25 '13 at 06:20

score 0 · Answer 2 · answered Oct 10 '20 at 09:32

it is best solution

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

for more details please see this it is taken from here

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

Jquery table navigation in td with input

2 Answers2