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

【问题标题】：How to bind up and down arrow key to enable navigating through table rows?如何绑定上下箭头键以启用表格行导航？
【发布时间】：2017-01-28 16:42:44
【问题描述】：

我正在用表格显示搜索结果。每个结果都有一个按钮供用户单击以显示其完整详细信息。这运作良好。

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

现在，用户必须单击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 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>

【问题讨论】：

查找上一个和下一个应该一点也不难。 $(this).nextSibling() & $(this).prevSibling() 之类的东西应该可以满足您的需求。

标签： javascript jquery knockout.js

【解决方案1】：

我想这就是你要找的。p>

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

希望对你有帮助。

【讨论】：

当搜索结果变长时，滚动条出现了，但是向上/向下箭头不移动滚动条。
发现我只需要将焦点设置在行或行中的元素上，使其自动滚动。
虽然这个解决方案可能有效，但这与淘汰赛无关

【解决方案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

【讨论】：

我不需要处理 css，因为 ko.js 为我完成了。