上下矢印キーをバインドしてテーブル行をナビゲートするにはどうすればよいですか？

Question

検索結果を表で表示しています。各結果には、ユーザーがクリックして詳細を表示するためのボタンがあります。それはうまくいきます。

キーボードの上下矢印を使用して検索結果をナビゲートすることもできます。

ここで、Selectボタンまたはタブをクリックして、space barを押す必要があります。

私は、キーアップとダウンイベントをトラップし、次に選択して設定する必要がある前または次のものを見つけることができますが、多くの作業のように聞こえると思います。私はそれを行うより良い方法があるのだろうか？

javascriptの

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 
     } 
    }; 
}; 

HTML

<table class="table"> 
    <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>table header 1</th> 
      <th>table header 2</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: searchResults"> 
     <tr data-bind="css: { 'btn-info': $parent.selectedResult() == $data }, event: { keyup: $parent.navUpDown } "> 
      <td> 
       <button class="btn btn-small" data-bind="click: $parent.selectResult">Select</button> 
      </td> 
      <td data-bind="text: data1"></td> 
      <td data-bind="text: data2"></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

私は、これはあなたが探しているものだと思います。

var myModel = new function() { 
     var self = this; 
     self.selectResult = function (item) { 
      self.selectedResult(item); 
     }; 
     self.selectedResult = ko.observable(); 
     self.searchResults = ko.observableArray([{ 
      data1: "1", 
      data2: "2" 
     }, { 
      data1: "2", 
      data2: "2" 
     }, { 
      data1: "3", 
      data2: "2" 
     }]); 


     self.selectPrevious = function() { 
      var index = self.searchResults().indexOf(self.selectedResult()) - 1; 
      if (index < 0) index = 0; 
      self.selectedResult(self.searchResults()[index]); 
     }; 

     self.selectNext = function() { 
      var index = self.searchResults().indexOf(self.selectedResult()) + 1; 
      if (index >= self.searchResults().length) index = self.searchResults().length - 1; 
      self.selectedResult(self.searchResults()[index]); 
     }; 


    }; 
ko.applyBindings(myModel); 

$(window).keyup(function (evt) { 
    if (evt.keyCode == 38) { 
     myModel.selectPrevious(); 
    } else if (evt.keyCode == 40) { 
     myModel.selectNext(); 
    } 
}); 

See Fiddle

私はそれが役に立てば幸い。

Answer 2

それは例えばnextとprev

を見つけるために、実際には難しいことではありません

$(window).keyup(function (evt) { 
    if (evt.keyCode == 38) { // up 
     $('tbody tr:not(:first).selected').removeClass('selected').prev().addClass('selected') 
    } 
    if (evt.keyCode == 40) { // down 
     $('tbody tr:not(:last).selected').removeClass('selected').next().addClass('selected') 
    } 
}); 

FIDDLE