Navigate a Table via the keyboard?

I'm trying to make a table that can do the following.

Row x Cols = 3x3: ok
Navigate via keyboard: ok
When 'focus' (or something) is on a cell update div2 with the data-param2: not working.
When pressing Enter on keyboard, update div1 with data-param1: not working

<html>
<head>
  <title>arrows.htm</title>
  <script language="javascript" type="text/javascript" src="js/keycode.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>

  <script type="text/javascript">
    var b4 = "";
    var col = 1;
    var row = 1;

    function bg() {
     var rc = "r" + row + "c" + col;
     if (b4 == "") b4 = rc;
     document.getElementById(b4).style.backgroundColor = "white";
     document.getElementById(rc).style.backgroundColor = "yellow";
     b4 = rc;
    }

    function test(){
     document.getElementById("q").innerHTML=this.id;
    }

    function processKeyDown(e) {
     var keyCode;
     if(e.which) { keyCode = e.which; } 
     else {
      alert("Unknown event type.");
      return ;
     }

     processKeyHandle(keyCode);
    }

    function processKeyHandle(keyCode) {
     var nc = 0;
     switch(keyCode) {
      case VK_LEFT :
      if (col > 1) col--;
       bg();
       break;
      case VK_UP :
       if (row > 1) row--;
       bg();
       break;
      case VK_RIGHT :
       if (col < 3) col++;
       bg();
       break;
      case VK_DOWN :    
       if (row < 3) row++;
       bg();
      case VK_ENTER :   
       break;
     }
    }

    </script>
    </head>
    <body onload="bg()" onkeydown="processKeyDown(event);" >
      <div id="div1">test</div>
      <div id="div2">test2</div>
      <div>
        <table border="1" id="tab">
          <tr>
            <td id="r1c1"><img class="imgs" height="100" width="50" class="e" data-param1="666" data-param2="777" src="http://web.scott.k12.va.us/martha2/dmbtest.gif" /></td>
            <td id="r1c2">b0</td>
            <td id="r1c3">c0</td> 
          </tr>
          <tr>
            <td id="r2c1">a1</td>
            <td id="r2c2">b1</td>
            <td id="r2c3">c1</td>
          </tr>
          <tr>
            <td id="r3c1">a2</td>
            <td id="r3c2">b2</td>
            <td id="r3c3">c2</td>
          </tr>
       </table>
      </div>
    <script>
     $(".imgs").click(function(){
      var elmThis = $(this);
      $("#div1").text(elmThis.data("param1"));  
     });
    </script>
  </body>
</html>

How do you navigate a table using the keyboard?

To go directly to a tab, press its KeyTip. To move in the group that's currently selected, press the Down arrow key. To move between groups on a ribbon, press Ctrl+Right or Left arrow key. To move between commands within a group, press the Tab key or Shift+Tab.

What key is used to navigate tables?

Within a table, the [Tab] key is used to move between cells, rather than for its traditional function of inserting tabs. For information on how to set tabs, refer to Setting Tabs.

How do I navigate a table in Word?

Move to the next or previous rowTo move to the next row in a table, press the down arrow. To move to the previous row in a table, press the up arrow.

How do I move a table in Word using the keyboard?

Position the insertion point in the row you want to move or select the rows you want to move. While holding down the Shift and Alt keys, press the Up Arrow or Down Arrow to move the row.

I got it to work

<html>
<head>

</head>
<body onload="bg()" onkeydown="processKeyDown(event);" >
<div id="div1">test</div>
<div id="div2">test2</div>
<div>
    <table border="1" id="tab">
        <tr>
            <td id="r1c1" data-param1="r1c1 param1" data-param2="r1c1 param2">a0</td>
            <td id="r1c2" data-param1="r1c2 param1" data-param2="r1c2 param2">b0</td>
            <td id="r1c3" data-param1="r1c3 param1" data-param2="r1c3 param2">c0</td>
        </tr>
        <tr>
            <td id="r2c1" data-param1="r2c1 param1" data-param2="r2c1 param2">a1</td>
            <td id="r2c2" data-param1="r2c2 param1" data-param2="r2c2 param2">b1</td>
            <td id="r2c3" data-param1="r2c3 param1" data-param2="r2c3 param2">c1</td>
        </tr>
        <tr>
            <td id="r3c1" data-param1="r3c1 param1" data-param2="r3c1 param2">a2</td>
            <td id="r3c2" data-param1="r3c2 param1" data-param2="r3c2 param2">b2</td>
            <td id="r3c3" data-param1="r3c3 param1" data-param2="r3c3 param2">c2</td>
        </tr>
    </table>
</div>
<script language="javascript" type="text/javascript" src="js/keycode.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>

<script type="text/javascript">
var b4 = "";
var col = 1;
var row = 1;

function bg() {
    var rc = "r" + row + "c" + col;
    if (b4 == "") b4 = rc;
    $("#"+b4).css("backgroundColor","white");
    $("#div2").text($("#"+rc).css("backgroundColor","yellow").data("param2"));
    b4 = rc;
}


function processKeyDown(e) {
    var keyCode;

    if(e.which) { 
        keyCode = e.which;
    } else {
        alert("Unknown event type.");
        return ;
    }

    processKeyHandle(keyCode);

}

function processKeyHandle(keyCode) {
    var nc = 0;
    switch(keyCode) {
    case VK_LEFT :
        if (col > 1) col--;
        bg();
        break;
    case VK_UP :
        if (row > 1) row--;
        bg();
        break;
    case VK_RIGHT :
        if (col < 3) col++;
        bg();
        break;
    case VK_DOWN :  
        if (row < 3) row++;
        bg();
        break;
    case VK_ENTER : 
        $("#div1").text($("#"+b4).data("param1"));
        break;
    }
}


</script>
</body>
</html>

Navigate a Table via the keyboard?

Tags:

javascript

jquery

html-table

Dennis Sødal Christensen

People also ask

1 Answers

Dennis Sødal Christensen

Recent Activity

Donate For Us

Navigate a Table via the keyboard?

Tags:

javascript

jquery

html-table

Dennis Sødal Christensen

People also ask

1 Answers

Dennis Sødal Christensen

Related questions

Recent Activity

Donate For Us