title: Table Scrolling using keyboard
body: <p>I've got a list of 40 rows in a table, they are nested within a div that displays 18 and hide's the rest using overflow-x:scroll. </p>
  
  <p>I have created a javascript code that will allow me to select a row and navigate the rows using 'up' and 'down' arrow keys on the keyboard. </p>
  
  <p>Two problems i'd like to solve are:</p>
  
  <ol>
  <li><p>I want to start the scrolling of the table when the last of the first 18 rows is set to active. </p></li>
  <li><p>If i'm on the first record and on the last record and i key in 'up' or 'down' i loose the active state of the row. </p></li>
  </ol>
  
  <p>Here's a jsfiddle i'm using to try and solve the problem <a href="http://jsfiddle.net/kmcbride/cJjRH/" rel="nofollow">http://jsfiddle.net/kmcbride/cJjRH/</a> and below is the code. </p>
  
  <p>Here's my code: </p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>            &lt;div class="table"&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt; &lt;span&gt;End User&lt;/span&gt; &lt;/th&gt;
                          &lt;th&gt; &lt;span&gt;Reseller&lt;/span&gt; &lt;/th&gt;
                          &lt;th&gt; &lt;span&gt;Distributor&lt;/span&gt; &lt;/th&gt;
                          &lt;th&gt; &lt;span&gt;Product Instance&lt;/span&gt; &lt;/th&gt;
                          &lt;th&gt; &lt;span&gt;Created On&lt;/span&gt; &lt;/th&gt;
                          &lt;th&gt; &lt;span&gt;Created By&lt;/span&gt; &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr class="openPane" id="1"&gt;
                          &lt;td&gt;Melita 1&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="2"&gt;
                          &lt;td&gt;Melita 2&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="3"&gt;
                          &lt;td&gt;Melita 3&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="4"&gt;
                          &lt;td&gt;Melita 4&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="5"&gt;
                          &lt;td&gt;Melita 5&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="6"&gt;
                          &lt;td&gt;Melita 6&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="7"&gt;
                          &lt;td&gt;Melita 7&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                       &lt;tr class="openPane" id="8"&gt;
                          &lt;td&gt;Melita 8&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="9"&gt;
                          &lt;td&gt;Melita 9&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt; 
                      &lt;tr class="openPane" id="10"&gt;
                          &lt;td&gt;Melita 10&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="11"&gt;
                          &lt;td&gt;Melita 11&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="12"&gt;
                          &lt;td&gt;Melita 12&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="13"&gt;
                          &lt;td&gt;Melita 13&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="14"&gt;
                          &lt;td&gt;Melita 14&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="15"&gt;
                          &lt;td&gt;Melita 15&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="16"&gt;
                          &lt;td&gt;Melita 16&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="17"&gt;
                          &lt;td&gt;Melita 17&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="18"&gt;
                          &lt;td&gt;Melita 18&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="19"&gt;
                          &lt;td&gt;Melita 19&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="20"&gt;
                          &lt;td&gt;Melita 20&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="21"&gt;
                          &lt;td&gt;Melita 21&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="22"&gt;
                          &lt;td&gt;Melita 22&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="23"&gt;
                          &lt;td&gt;Melita 23&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="24"&gt;
                          &lt;td&gt;Melita 24&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="25"&gt;
                          &lt;td&gt;Melita 25&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="26"&gt;
                          &lt;td&gt;Melita 26&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                       &lt;tr class="openPane" id="27"&gt;
                          &lt;td&gt;Melita 27&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="28"&gt;
                          &lt;td&gt;Melita 28&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="29"&gt;
                          &lt;td&gt;Melita 29&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="30"&gt;
                          &lt;td&gt;Melita 30&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="31"&gt;
                          &lt;td&gt;Melita 31&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="32"&gt;
                          &lt;td&gt;Melita 32&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="33"&gt;
                          &lt;td&gt;Melita 33&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="34"&gt;
                          &lt;td&gt;Melita 34&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="35"&gt;
                          &lt;td&gt;Melita 35&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="36"&gt;
                          &lt;td&gt;Melita 36&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="37"&gt;
                          &lt;td&gt;Melita 37&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="38"&gt;
                          &lt;td&gt;Melita 38&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="39"&gt;
                          &lt;td&gt;Melita 39&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="40"&gt;
                          &lt;td&gt;Melita 40&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="openPane" id="41"&gt;
                          &lt;td&gt;Melita 41&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;WiSe00004&lt;/td&gt;
                          &lt;td&gt;Enabled&lt;/td&gt;
                          &lt;td&gt;7/11/2013 12:56:00PM&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;div class="load-more-btn"&gt;Load More&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>Js:</strong></p>
  
  <pre><code>$(".openPane").click(function() {
      if ($(".pane").hasClass('pane-open')) {
          $(".openPane").removeClass('rowActive');
          $(this).addClass('rowActive');
      }else{
          $(".pane").slideToggle(250).addClass('pane-open');
          $(".openPane").removeClass('rowActive');
          $(this).addClass('rowActive');
      };
  });
  
  $(document).keydown(function (e) {
  
      var currentRow = $(".rowActive").get(0);
  
      switch(event.keyCode)
      {
              //arrow down
          case 40:
              $(currentRow).next().addClass("rowActive");
              $(currentRow).removeClass("rowActive");
              break;
              //arrow up
          case 38:
              $(currentRow).prev().addClass("rowActive");
              $(currentRow).removeClass("rowActive");
              break;
              //esc
          case 27:
              if ($(".pane").hasClass('pane-open') &amp;&amp; !$(".pane").hasClass('pane-pinned')){
                  $(".pane").slideToggle(250).removeClass('pane-open');
              };
              break;    
      } 
  
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    .table {
      width: 100%;
      height: 400px;
      overflow-x: scroll;
  }
  .table table {
      width: 100%;
  }
  .table table th {
      text-align: left;
  }
  .rowActive {
      background-color: #EDF4F9!important;
  }
  </code></pre>