如何給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); //循環(huán)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){ //對整個頁面監(jiān)聽 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進行監(jiān)聽。 多調用一次該函數即可，例如: if(keyNum==40){ getTableValue("indexTable","40"); getTableValue("headTable","40"); } 該文章在 2023/6/12 10:07:07 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
