Вопросы Теги

Навигация по таблице с помощью клавиатуры?

Я пытаюсь сделать таблицу, которая может сделать следующее.

  1. Ряд x столбцы = 3x3 :хорошо
  2. Навигация с помощью клавиатуры :ок
  3. Когда «фокус» (или что-то )находится на обновлении ячейки div2с неработающим data-param2:.
  4. При нажатии Enter на клавиатуре обновите div1данные -param1 :не работают
<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>
6
задан Brian Tompsett - 汤莱恩 7 September 2018 в 15:01
поделиться