实现表格中上下键选中效果

实现表格中上下键选中效果

var keyIndex = null;//上下键选择时的索引
var listInfo = {
    params: {
        ......省略........
        onClickRow: function(row,$element) {
            var index=$($element).attr('data-index');
            $('#curIndex').text(Number(index)+1);
            keyIndex = index;//给上下键的index赋值，
        },
        ........省略........

$(document).keyup(function(e){
        var list1Data = $('#listInfo').bootstrapTable('getData');
        var list1length = list1Data.length;

        switch(e.keyCode) {
            case 38:  //up
                keyIndex--;  
                if (keyIndex == 0) keyIndex = 0; //到顶了

              //有效高度，选中位置
                var vilidHeight = $("#listInfo").parent().height();
                var totalHeight = $("#listInfo").height();
                var theadHeight = $("#listInfo").find("thead").height();
                var realHeight = vilidHeight - theadHeight;
                var trs = $("#listInfo").find("tbody").children();
                var trHeights = 0;
                for(var j = 0; j < keyIndex; j++) {
                    trHeights += $(trs[j]).height();
                }

                if(trHeights >= 0 && trHeights < realHeight / 2) {
                    $("#listInfo").parent().scrollTop(0);
                } else if(trHeights >= realHeight / 2 && trHeights <= totalHeight - realHeight / 2) {
                    $("#listInfo").parent().scrollTop(trHeights - realHeight / 2);
                }

                break;
            case 40:  //down
                keyIndex++;  
                if (keyIndex == list1length -1) keyIndex=list1length-1; //到底了   

              //有效高度，选中位置
                var vilidHeight = $("#listInfo").parent().height();
                var totalHeight = $("#listInfo").height();
                var theadHeight = $("#listInfo").find("thead").height();
                var realHeight = vilidHeight - theadHeight;
                var trs = $("#listInfo").find("tbody").children();
                var trHeights = 0;
                for(var j = 0; j < keyIndex; j++) {
                    trHeights += $(trs[j]).height();
                }

                if(trHeights > realHeight / 2 && trHeights <= totalHeight - realHeight / 2) {
                    $("#listInfo").parent().scrollTop(trHeights - realHeight / 2);
                } else if(trHeights > totalHeight - realHeight / 2) {
                    $("#listInfo").parent().scrollTop(totalHeight - realHeight);
                }

                break;
        }


        var keyRow = {};
        keyRow = list1Data[keyIndex];
        initRightTable(keyRow);
        $('#curIndex').text(Number(keyIndex)+1);

            var unselectTr = $("#listInfo tbody tr");
            unselectTr.removeClass("trSuccess tableSelected");
            unselectTr.css("background-color", "#fff !important");
            var selectTr = $("#listInfo tbody tr[data-index="+ keyIndex+ "]");
            selectTr.css("background", "#e8e7e7");
    });