如何给table添加方向键上下左右移动聚焦的功能
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
:如何给table添加方向键上下左右移动聚焦的功能
<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 编辑过 |
关键字查询
相关文章
正在查询... |