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


    //将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; }}
  • 相关阅读:
    Js onmouseover和onmouseout小特效
    js操作元素透明度以及浏览器兼容性
    大多数人不知道的表格其他写法的onmouseover效果
    表格的删除与添加以及id的唯一性
    添加或创建元素,最新消息在最上方
    数组元素排序
    删除父级元素
    网页侧栏小分享
    如何利用极致业务基础平台构建一个通用企业ERP之十七过滤器的功能介绍
    如何利用极致业务基础平台构建一个通用企业ERP之十六物料进出明细报表的设计
  • 原文地址:https://www.cnblogs.com/rey888/p/10333062.html
Copyright © 2020-2023  润新知