行選択可能なTableを作って矢印キーで操作する

クリック時に行選択ができるテーブルを作って、更に上下キーが押されたときにkeydownイベントを拾って選択を切り替えられるようにしてみた。
参考にしたのはStackOverFlowのこちらの質問の２番めの回答

概要

JavaScriptでは、フォーカスが設定できる要素じゃないとキーイベントが使えないらしいので、テーブルがクリックされた時にテキストボックスにフォーカスを設定してテキストボックスのイベントとして処理を行う。

実装

<div>
   <!-- readonly属性をつけとかないと、テーブルがクリックされたときに文字が入力できてしまう。 -->
   <input type="text" id="tableEventShifter" readonly>

   <table id="myTable">
     <thead>
        <tr><th>name</th><th> price</td></tr>
     </thead>
     <tbody>
       <tr>
         <td>aaaa</td><td>1000</td>
       </tr>
       <tr>
         <td>bbbb</td><td>2000</td>
       </tr>
       <tr>
         <td>cccc</td><td>3000</td>
       </tr>
      </tbody>
   </table>
</div>

body{margin:0;padding:0;}

/* テキストボックスを隠す */
div{background:white;}
# tableEventShifter{
  /* テキストボックスを邪魔にならない場所に置くのであれば特に以下の通りにしなくても大丈夫です。 */
  /* ただし、フォーカスが設定されないとだめなので、display:none;はNG*/
  position:absolute;
  z-index: -10;
  height:0;
}

/* 行の選択色 */
.selected {background:yellow;}

// テーブルクリック時、テキストボックスにフォーカスをセット
$("#myTable").on("click",function(e){
  $("#tableEventShifter").focus();
});

// クリック時、行選択(ヘッダ除く)
$("#myTable tbody tr").on("click",function(e){
  // 選択されている他の行があれば選択解除
  $(this).siblings().removeClass("selected");
  // クリックされた行を選択
  $(this).addClass("selected"); 
});

// Tableタグではkey系のイベントが拾えないので、textboxのイベントとしてバインドする
$("#tableEventShifter").on("keydown", function(e) {
    switch (e.keyCode) {
      case 38: // ↑キー
        // 上の行を選択
        $('#myTable tbody tr:not(:first).selected')
          .removeClass('selected')
          .prev().addClass('selected')
        break;
        
      case 40: // ↓キー
        // 下の行を選択
        $('#myTable tbody tr:not(:last).selected')
          .removeClass('selected')
          .next().addClass('selected')
        break;
    }
  // スクロールさせない
  e.preventDefault();
});

CodePen

See the Pen Row selectable table on key events. by Yanchi4425 (@yanchi4425) on CodePen.