Question

我创造小提琴：

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（当table或div有垂直滚动时，它应该如何工作选择行的示例{ {3}} /）

Answer 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方法1

   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/

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

这是有效的。

使用带有垂直滚动的表格的向上和向下箭头

2 个答案: