键盘上下键移动选择table表格行的js代码

发布时间：2020-12-14 23:00:05 所属栏目：资源来源：网络整理

导读：//这是要操作的表格：这是第一行这是第二行这是第三行这是第四行 //这是操作表格的代码 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

//这是要操作的表格： 
<table id="tb"> 
<tr><td>这是第一行</td> </tr> 
<tr><td>这是第二行</td> </tr> 
<tr><td>这是第三行</td></tr> 
<tr><td>这是第四行</td></tr> 
</table> 
//这是操作表格的代码 
<script> 
var rowNo= -1; 
var tableId = 'tb'; 
var inputId = 'show'; 
var selectedColor = "#FF0000" 
function document.onkeydown() 
{ 
//事件的标识代码 
if (event.keyCode == 38) 
{ 
for(var k=0;k<document.getElementById(tableId).rows.length;k++) 
{ 
document.getElementById(tableId).rows(k).bgColor="#FFFFFF"; 
} 
if(rowNo == 0) 
{ 
rowNo++; 
} 
document.getElementById(tableId).rows(--rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor; 
document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText; 
} 
//事件的标识代码 
if (event.keyCode== 40) 
{ 
for(var k=0;k<document.getElementById(tableId).rows.length;k++) 
{ 
document.getElementById(tableId).rows(k).bgColor="#FFFFFF"; 
} 
document.getElementById(tableId).rows(++rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor; 
document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText; 
} 
} 
</script> 
<input type="text" id="show" value="do">

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!