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

来源：动视网责编：小采时间：2020-11-27 20:46:30

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

键盘上下键移动选择table表格行的js代码_javascript技巧: //这是要操作的表格：这是第一行这是第二行这是第三行这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'show'; var selectedColor = #FF0000 function document.on

推荐度：

点击下载本文 文档为doc格式

导读键盘上下键移动选择table表格行的js代码_javascript技巧: //这是要操作的表格：这是第一行这是第二行这是第三行这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'show'; var selectedColor = #FF0000 function document.on

//这是要操作的表格： 
<table id="tb"> 
<tr><td>这是第一行</td> </tr> 
<tr><td>这是第二行</td> </tr> 
<tr><td>这是第三行</td></tr> 
<tr><td>这是第四行</td></tr> 
</table> 
//这是操作表格的代码 
 
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需刷新才能执行]

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

推荐度：

点击下载本文 文档为doc格式

标签：键盘表格表格的

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐