2

我创建小提琴：

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 具有垂直滚动时它应该如何工作选择行的示例http:// dhtmlx.com/docs/products/dhtmlxGrid /)

4

2 回答 2

2

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

就基本功能而言，它基本上尝试选择 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/

于 2013-07-18T09:11:42.117 回答
1

使用以下代码：

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

这是有效的。

于 2013-07-18T09:09:03.023 回答