javascript - Using arrows-keys to navigate

Question

I am wondering if there was a possibility to navigate with arrow keys through a table I created with JS(using jQuery)? I mean jumping from cell to cell...The script is for Greasemonkey.

The alert, however, works. I just got no idea how to make it well-functioning.

$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       alert( "left pressed " );
       return false;
    }
    if (e.keyCode == 38) { 
       alert( "up pressed " );
       return false;
    }
    if (e.keyCode == 39) { 
       alert( "right pressed " );
       return false;
    }
    if (e.keyCode == 40) { 
       alert( "down pressed " );
       return false;
    }
});
;

Any hint or whatever is much appreciated. Thanks in advance, Faili

Update

It seems like I explained myself wrong. Give me another try: Demo

This one may give you an idea of what I wanted. After selecting one input-field a navigation with arrow keys is possible. My problem is that I just can't realise it via GM and jQuery. Any idea?

Thanks again for your time and effort.

Finally it was like:

function myTest_analysis1(e,leftkey,up,right,down){
    myTest(e,'','','field_analysis2','field_communication1')

function myTest(e,leftkey,up,right,down)
{
  if (!e) e=window.event;
  var selectArrowKey;
  switch(e.keyCode)
  {
  case 37:
    // Key left.
    selectArrowKey = leftkey;
    break;
  case 38:
    // Key up.
    selectArrowKey = up;
    break;
  case 39:
    // Key right.
    selectArrowKey = right;
    break;
  case 40:
    // Key down.
    selectArrowKey = down;
    break;
  }
  if (!selectArrowKey) return;  
  var controls = window.document.getElementById(selectArrowKey);
  if (!controls) return;
  controls.focus();
}
}
 $('#field_analysis1').keydown (myTest_analysis1);

That's how it worked out for me. I bet there is a smarter solution, but I couldn't figure it out right now.

Thank you sooo much for your time and effort.

Answer 1

Here is a version that allows for the following

1. constrains at start and end of the table (first and last cell of the table)
2. wraps at the end of each row and moves to the next
3. scrolls the current cell into view if there is scrolling required to see it
4. supports mouse-click to select a cell

Demo at : https://jsfiddle.net/BdVB9/

---

with an html structure like

<table id="navigate">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

and javascript

var active = 0;

$(document).keydown(function(e){
    reCalculate(e);
    rePosition();
    return false;
});
    
$('td').click(function(){
   active = $(this).closest('table').find('td').index(this);
   rePosition();
});


function reCalculate(e){
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    //alert(columns + 'x' + rows);
    
    if (e.keyCode == 37) { //move left or wrap
        active = (active>0)?active-1:active;
    }
    if (e.keyCode == 38) { // move up
        active = (active-columns>=0)?active-columns:active;
    }
    if (e.keyCode == 39) { // move right or wrap
       active = (active<(columns*rows)-1)?active+1:active;
    }
    if (e.keyCode == 40) { // move down
        active = (active+columns<=(rows*columns)-1)?active+columns:active;
    }
}

function rePosition(){
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');
    scrollInView();
}

function scrollInView(){
    var target = $('#navigate tr td:eq('+active+')');
    if (target.length)
    {
        var top = target.offset().top;
        
        $('html,body').stop().animate({scrollTop: top-100}, 400);
        return false;
    }
}