在垂直滚动的表格中使用向上和向下箭头答案

【问题标题】：Using up and down arrow for table with vertical scroll在垂直滚动的表格中使用向上和向下箭头
【发布时间】：2013-07-17 03:23:45
【问题描述】：

我创建小提琴：

http://jsfiddle.net/marko4286/7TmJc/

function arrowUp() {
    var activeTableRow = $('.table tbody tr.active').removeClass('active').first();
    if (activeTableRow.length) {
        activeTableRow.prev().addClass('active');
    } else {
        $('.table tbody').children().last().addClass('active');
    }
};
function arrowDown() {
    var activeTableRow = $('.table tbody tr.active').removeClass('active').first();
    if (activeTableRow.length) {
        activeTableRow.next().addClass('active');
    } else {
        $('.table tbody').children().first().addClass('active');
    }
};


$(window).keydown(function (key) {
    if (key.keyCode == 38) {
        arrowUp();
    }
    if (key.keyCode == 40) {
        arrowDown();
    }
});

问题是当我使用向上/向下箭头键和垂直滚动时。结束时自动返回第一行。

当我在第一行时，我想停止向上选择，当我在最后一行时，我想停止向下选择行。

另外，问题是我有一个垂直滚动，通过箭头选择行应该是告别，因为它会自动滚动 div（当表格或 div 有垂直滚动时它应该如何选择行的示例@ 987654322@/)

【问题讨论】：

标签： javascript arrow-keys vertical-scroll

【解决方案1】：

我提供的第一个函数真的会更简洁。基本上，这两种方法的唯一区别是调用的是 next 还是 prev，因此该函数接受这个值作为参数并适用于两个方向。

就基本功能而言，它基本上尝试选择下一个或上一个tr。如果元素不存在，它什么也不做。如果它确实存在，它只是切换类。

Javascript 方法 0

function arrow(dir) {
    var activeTableRow = $('.table tbody tr.active')[dir](".table tbody tr");
    if (activeTableRow.length) {
        $('.table tbody tr.active').removeClass("active");
        activeTableRow.addClass('active');
    } 
};

$(window).keydown(function (key) {
    if (key.keyCode == 38) {
        arrow("prev");
    }
    if (key.keyCode == 40) {
        arrow("next");
    }
});

工作示例： http://jsfiddle.net/7TmJc/4/

Javascript 方法一

   function arrowUp() {
        var activeTableRow = $('.table tbody tr.active').prev(".table tbody tr");
        if (activeTableRow.length) {
            $('.table tbody tr.active').removeClass("active");
            activeTableRow.addClass('active');
        } 
    };
    function arrowDown() {
        var activeTableRow = $('.table tbody tr.active').next(".table tbody tr");
        if (activeTableRow.length) {
            $('.table tbody tr.active').removeClass("active");
            activeTableRow.addClass('active');
        }
    };


    $(window).keydown(function (key) {
        if (key.keyCode == 38) {
            arrowUp();
        }
        if (key.keyCode == 40) {
            arrowDown();
        }
    });

工作示例： http://jsfiddle.net/7TmJc/3/

【讨论】：

这太棒了...只注意，例如，当我添加更多行并使用向上和向下箭头滚动时，焦点不是行...如何做到这一点..
准确地说...尽管表格具有垂直滚动功能，但我如何滚动到顶部活动行...或者我将链接示例放到 dhtmlxgrid 中，其中焦点在行而不是垂直滚动时用完/向下箭头

【解决方案2】：

使用下面的代码：

function arrowUp() {
    if(!$(".table tbody tr").first().hasClass('active')){
    var activeTableRow = $('.table tbody tr.active').removeClass('active').first();
    if (activeTableRow.length) {
        activeTableRow.prev().addClass('active');
    } else {
        $('.table tbody').children().last().addClass('active');
    }
    }
};
function arrowDown() {
    if(!$(".table tbody tr").last().hasClass('active')){
    var activeTableRow = $('.table tbody tr.active').removeClass('active').first();
    if (activeTableRow.length) {
        activeTableRow.next().addClass('active');
    } else {
        $('.table tbody').children().first().addClass('active');
    }
   }
};

这是有效的。

【讨论】：