title: How to bind up and down arrow key to enable navigating through table rows?
body: <p>I'm displaying search results with a table. Each result has a button for user to click on to show the full detail of it. That's working well. </p>
  
  <p>What I also want is to make it possible to navigat the search results by using keyboard's up and down arrow. </p>
  
  <p>Now, user have to click on the <code>Select</code> button or tab to the button and press <code>space bar</code>.</p>
  
  <p>I suppose I can trap the keyup and down event and then find the previous or next one I need to select and then set it, but it sounds like a lot of work. I wonder if there's a better way to do it?</p>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>var myModel = new function() {
      var self = this;
  
      self.selectedResult = ko.observable(new MyObj());
      self.searchResults = ko.observableArray();
      self.navUpDown = function (item, evt) {
          if (evt.keyCode == 38) { // up
              var id = item.ID();
              // find previous one and set selectedResult
          }
  
          if (evt.keyCode == 40) { // down
              var id = item.ID();
              // find next one and set selectedResult
          }
      };
  };
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
              &lt;th&gt;table header 1&lt;/th&gt;
              &lt;th&gt;table header 2&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: searchResults"&gt;
          &lt;tr data-bind="css: { 'btn-info': $parent.selectedResult() == $data }, event: { keyup: $parent.navUpDown } "&gt;
              &lt;td&gt;
                  &lt;button class="btn btn-small" data-bind="click: $parent.selectResult"&gt;Select&lt;/button&gt;
              &lt;/td&gt;
              &lt;td data-bind="text: data1"&gt;&lt;/td&gt;
              &lt;td data-bind="text: data2"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>