如何绑定向上和向下箭头键以启用表格行导航？

我正在用表格显示搜索结果。 每个结果都有一个按钮供用户点击以显示它的完整细节。 这很好用。

我还想要的是使用键盘的向上和向下箭头来导航搜索结果。

现在，用户必须单击“ Select按钮或选项卡到按钮，然后按space bar 。

我想我可以捕获keyup和down事件，然后找到我需要选择的上一个或下一个，然后设置它，但听起来好像很多工作。 我想知道是否有更好的方法呢？

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 header 1
 
table header 2
 
 
 
 
 
 Select 
 
 
 
 
  

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

见小提琴

我希望它有所帮助。

Answer 2

实际上并不难找到next和上next

例如

 $(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') } }); 

小提琴