Javascript 使用键盘滚动表格

我在一个表中有一个40行的列表，它们嵌套在一个div中，显示18行，并使用overflow-x:scroll隐藏其余的行

我已经创建了一个javascript代码，允许我选择一行，并使用键盘上的“向上”和“向下”箭头键导航行

我想解决的两个问题是：

当前18行中的最后一行设置为活动时，我想开始表格的滚动

如果我在第一条记录和最后一条记录上，并且我输入“向上”或“向下”，我将失去该行的活动状态

下面是我用来尝试解决问题的JSFIDLE，下面是代码

这是我的密码：

HTML:

CSS:

---

要处理问题2，只需在实际移动到另一行之前检查$currentRow.next.length或$currentRow.prev.length是否不为零

然而，我实际上只需要编写一个函数来处理选择新行的问题，然后从事件处理程序中为单击和上下键调用它。这可以防止您重复代码做同样的事情三次。在这个新函数中，您只需检查$newRow.length即可

这就解决了问题2。滚动有点困难

首先，您希望从上下键事件返回false，以覆盖这些键导致的默认滚动

然后，您可以使用location.hash=+$newRow.attr'id'；，让浏览器自动滚动到一行；，但这将使该行位于表的顶部，而不是像您所希望的那样等待所选行位于底部

要获得想要的滚动行为，必须添加position:relative；你的桌子造型；使用$currentRow.position函数查找行相对于表的位置；然后将一些数学信息传递给$'.table'。滚动顶部以滚动到那里

var rowTop = newRow.position().top;
var rowBottom = rowTop + newRow.height();
var $table = $('.table'); // store instead of calling twice
var tableHeight = $table.height();
var currentScroll = $table.scrollTop();

if (rowTop < 0) // row is above our current viewing area
{
    // scroll up
    $('.table').scrollTop(currentScroll + rowTop);
}
else if (rowBottom  > tableHeight) // row is below our current viewing area
{
    // scroll down
    var scrollAmount = rowBottom - tableHeight;
    $('.table').scrollTop(currentScroll + scrollAmount);
}

。。。此外，您希望在.table样式中使用overflow-y，而不是overflow-x

我把所有这些都整理成了你的小提琴：

---

编辑：您还可以查看是否有轻微的修改，当您按向上键越过第一条记录或按向下键越过最后一条记录时，默认的浏览器滚动将重新开始。当未选择新行时，它从事件处理程序返回true。

谢谢工作得很好：我对javascript和jQuery有点陌生，所以我完全了解它的功能。

$(".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') && !$(".pane").hasClass('pane-pinned')){
                $(".pane").slideToggle(250).removeClass('pane-open');
            };
            break;    
    } 

});

    .table {
    width: 100%;
    height: 400px;
    overflow-x: scroll;
}
.table table {
    width: 100%;
}
.table table th {
    text-align: left;
}
.rowActive {
    background-color: #EDF4F9!important;
}

var rowTop = newRow.position().top;
var rowBottom = rowTop + newRow.height();
var $table = $('.table'); // store instead of calling twice
var tableHeight = $table.height();
var currentScroll = $table.scrollTop();

if (rowTop < 0) // row is above our current viewing area
{
    // scroll up
    $('.table').scrollTop(currentScroll + rowTop);
}
else if (rowBottom  > tableHeight) // row is below our current viewing area
{
    // scroll down
    var scrollAmount = rowBottom - tableHeight;
    $('.table').scrollTop(currentScroll + scrollAmount);
}