在表格中按上下左右键移动光标

标签：ali   指定元素   根据   break   put   display   方法   ase   max   

//将input中加入属性data-col=‘x-y‘
function getXy(el){
    if(el != null&&el.length != 0 && el.attr("data-col")!= null){
        var attr = el.attr("data-col");
        var temp = attr.split("-");
        var arr = [];
        arr.push(parseInt(temp[0]));
        arr.push(parseInt(temp[1]));
        return arr;
    }
    return [1,4];
}
function isMove(el){
    var isReadonly = el.attr("readonly");
    var isDisabled = el.attr("disabled");
    var isHide = el.parent().parent().css("display");
    return isReadonly=="readonly"||isDisabled=="disabled"||"none"==isHide;
}
function moveLeft(row,line){
    if(line <= 1){
        return
    }
    var el = $("input[data-col=‘"+row+"-"+(--line)+"‘]");
    console.log(el);
    if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
        moveLeft(row,line);
        return;
    }
    el.focus();
}
function moveRight(row,line){
    if(line >= 13){
        return
    }
    var el = $("input[data-col=‘"+row+"-"+(++line)+"‘]");
    console.log(el);
    if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
        moveRight(row,line);
        return;
    }
    el.focus();
}
function moveTop(row,line){
    if(row <= 1){
        return
    }
    var el = $("input[data-col=‘"+(--row)+"-"+(line)+"‘]");
    console.log(el);
    if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
        moveTop(row,line);
        return
    }
    el.focus();
}
function moveDown(row,line){
    var max = $("#tbodyMx").find("tr").length;
    if(row >= max){
        return
    }
    var el = $("input[data-col=‘"+(++row)+"-"+(line)+"‘]");
    console.log(el);
    if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
        moveDown(row,line);
        return
    }
    el.focus();
}
document.onkeydown=function(e){
    var e=window.event||e;
    if(e.keyCode!= 37&&e.keyCode!= 38&&e.keyCode!= 39&&e.keyCode!= 40){
        return;
    }
    var el = $("input:focus");

    if(el==null || el.length == 0 || el.attr("data-col")==null){ 
       $("[data-col=‘1-4‘]").focus();       
 　　　　return;    
}    //根据光标所在的元素获得一个两位长度的数组，第一个是行，第二个是列，如果光标不存在元素或者元素不是指定元素则光标默认到第一个元素上面    var arr = getXy(el);    var row = arr[0];    var line = arr[1];    if(line == 2||line == 1||line==3||line==4){        $("#spmx").scrollLeft(0);    }    switch(e.keyCode){    case 37: //左        //如果列为0，则无需变动光标位置，否则找到列比本元素的列小一个的位置        moveLeft(row,line);    break;    case 38: //上        //如果行为0则无需变动，否则移动到比当前行少一位的位置        moveTop(row,line);    break;    case 39:  //右        //如果列为最大值则不需变动，否则向右移动一个位置        moveRight(row,line);    break;    case 40:  //下        //如果行为最大值则无需变动，否则向下移动一个位置        moveDown(row,line);    break;    }}

在表格中按上下左右键移动光标

标签：ali   指定元素   根据   break   put   display   方法   ase   max   

原文地址：https://www.cnblogs.com/rey888/p/10333062.html