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

You should be able to focus the various cells, I will put an example together using .focus()

Here is the example.

Please bear in mind that…

a) There is nothing in this example to stop you from going out of bounds, you would need to restrict the values of currentRow and currentCell to the number of cells and prevent them from going below 0.

b) At the moment, there is no code to remove the green text, which is what I’ve used to show the current focus. This means a green trail is left behind.

You could solve both of the above fairly easily, but they would make the example more complicated…

    var currentRow = 0;
    var currentCell = 0;

    function ChangeCurrentCell() {
        var tableRow = document.getElementsByTagName("tr")[currentRow];
        var tableCell = tableRow.childNodes[currentCell];
        tableCell.focus();
        tableCell.style.color = "Green";
    }
    ChangeCurrentCell();

    $(document).keydown(function(e){
        if (e.keyCode == 37) { 
           currentCell--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 38) { 
           currentRow--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 39) { 
           currentCell++;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 40) { 
           currentRow++;
           ChangeCurrentCell();
           return false;
        }
    });