title: Using the Up and Down arrows keys to scroll (highlight) row in an HTML table
body: <p>I can't seem to be able to use my arrow Up and Down keys on the keyboard to be able to navigate (highlight row) in my HTML table. It should be noted that once a row is clicked and I hit the up or down arrow keys, the highlighted row should move accordingly.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Here is the HTML markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; 
  
  &lt;style type="text/css"&gt;
  
  .highlight {
  
      background-color: rgb(255,0,0);
  
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
  window.onload = function() {
  
  var rowCount = $('#data &gt;tbody &gt;tr').length;
  $("#maxrows").val(rowCount);
  
      var $tbody = $("#data tbody").on('click', 'tr', function() {
              highlight($(this));
      });
  
  
      $('#goto_first').click(function() {
          var $first = $tbody.find('tr').first();
              highlight($first);
      });
  
      $('#goto_prev').click(function() {
          var $prev = $tbody.find('.highlight').prev();
              highlight($prev);
      });
  
  
      $('#goto_next').click(function() {
          var $next = $tbody.find('.highlight').next();
              highlight($next);
      });
  
      $('#goto_last').click(function() {
          var $last = $tbody.find('tr').last();
              highlight($last);
      });
  
      $('#goto_row').click(function() {
  
          var $row = prompt("Enter row number")
  
          highlight($("#data tr").eq($row));
  
      });
  
      $('#remove_row').click(function() {
  
          var $row = $tbody.find('.highlight')
  
          $row.remove();
  
          renumberRows()
  
      });
  
  
      $('#data tr').keydown(function (e) {
  
          if (e.which == 40) {//down arrow
              var $row = $tbody.find('.highlight')
  
              highlight($row);
          }
  
            else if (e.which == 38) {//up arrow
              var $row = $tbody.find('.highlight')
  
              highlight($row);
          }
  
       });
  
      function highlight($row) {
              if ($row.length) {
                  $tbody.children().removeClass("highlight");
                  $row.addClass('highlight');
                  $("#rownum").val($row[0].rowIndex);
              }
      }
  
      function renumberRows() {
          $('#data tr').each(function(index, el){
              $(this).children('td').first().text(index++);
          });
      }
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table id="data" border="1" cellspacing="1" cellpadding="1"&gt;
  
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th&gt;header2&lt;/th&gt;
              &lt;th&gt;header3&lt;/th&gt;
              &lt;th&gt;header4&lt;/th&gt;
              &lt;th&gt;header5&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  Row Number:
  &lt;br&gt;
  &lt;input type="text" id="rownum" readonly&gt;&lt;br&gt;
  of
  &lt;br&gt;
  &lt;input type="text" id="maxrows" readonly&gt;
  &lt;br&gt;
  &lt;input type="button" id="goto_first" value="first"&gt;
  &lt;input type="button" id="goto_prev" value="prev"&gt;
  &lt;input type="button" id="goto_next" value="next"&gt;
  &lt;input type="button" id="goto_last" value="last"&gt;
  &lt;input type="button" id="goto_row" value="goto row"&gt;
  &lt;input type="button" id="remove_row" value="remove row"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>