LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

如何给table添加方向键上下左右移动聚焦的功能

liguoquan
2023年6月12日 10:7 本文热度 518
:如何给table添加方向键上下左右移动聚焦的功能

  1. 文件最后面添加以下代码

<script>

//全局变量

                var rows_count;

var cols_count;

               //向左移动函数

function moveLeft(r,c,tableId){

var obj = document.getElementById(tableId);

if (c>0) {

for(i=c-1;i>=0;i--){

try{

obj.rows[r].cells[i].childNodes[0].focus();

break;

}catch(e){

}

}

//obj.rows[r].cells[c].childNodes[0].focus();

}

                 //向右移动函数

function moveright(r,c,tableId){

var obj = document.getElementById(tableId);

if(c<obj.rows[r].cells.length ){

for(i=c+1;i<obj.rows[r].cells.length;i++){

try{

obj.rows[r].cells[i].childNodes[0].focus();

break;

}catch(e){

}

}

}

}

                 //向上移动函数

function moveup(r,c,tableId){

var obj = document.getElementById(tableId);

if(r>0){

for(i=r-1;i>=0;i--){

try{

    if((c+1)>obj.rows[i].cells.length){

     c=obj.rows[i].cells.length-1;

        }

obj.rows[i].cells[c].childNodes[0].focus();

break;

}catch(e){

}

}

}

 

}

                 //向下移动函数

function movedown(r,c,tableId){

var obj = document.getElementById(tableId);

if(r<(obj.rows.length-1)){

for(i=r+1;i<obj.rows.length;i++){

try{

if((c+1)>obj.rows[i].cells.length){

c=obj.rows[i].cells.length-1;

    }

obj.rows[i].cells[c].childNodes[0].focus();

break;

}catch(e){

}

}

}

}

/**

* @function 获取Table单元格Input

* @param {string} 参数 tableId keycode

* @desription 说明:参数为Table的id值和对应方向键的数码

*/

                 //获取对应的行列数,并调方向键事件

function getTableValue(tableId,keycode) {

    var obj = document.getElementById(tableId);

    //循环Table行数  

    for (var i = 0; i < obj.rows.length; i++) {

            for (var j = 0; j < obj.rows[i].cells.length; j++) {

if (obj.rows[i].cells[j].childNodes[0] == document.activeElement) {    

rows_count=i;

cols_count=j;

       }

    }

if(keycode==37){

   moveLeft(rows_count,cols_count,tableId);

  }

  if(keycode==38){

   moveup(rows_count,cols_count,tableId);

  }

  if(keycode==39){

   moveright(rows_count,cols_count,tableId);

  }

  if(keycode==40){

   movedown(rows_count,cols_count,tableId);

  }

}

document.onkeydown=function(e){    //对整个页面监听  

var keyNum=window.event ? e.keyCode :e.which; 

//按下左键  

if(keyNum==37){  

getTableValue("indexTable","37");

}  

 

//向上键

if(keyNum==38){  

  getTableValue("indexTable","38");

  

}  

//右键

if(keyNum==39){

   getTableValue("indexTable","39");

   

}  

//向下键

if(keyNum==40){

  getTableValue("indexTable","40");

}  


}

</script>

2.如何调用,例如: getTableValue("indexTable","40");,该函数的第一参数对应的是table的id,只须改成对应table的id即可。也对多个table的id进行监听。

多调用一次该函数即可,例如:

if(keyNum==40){

  getTableValue("indexTable","40");

                  getTableValue("headTable","40");

}  



该文章在 2023/6/12 10:07:07 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved