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

发布于 2017-07-05 02:14:39 | 166 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

通过键盘上的上下键可以选择表格行的实现效果代码。思路不错，需要的朋友可以参考下。

//这是要操作的表格： 
<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需刷新才能执行]

最新网友评论 共有(0)条评论发布评论返回顶部

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

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他