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

更新时间：2009年12月26日 02:33:04 作者：

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

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

您可能感兴趣的文章:

JS中的6种打断点的方式实例总结
断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了,下面这篇文章主要给大家介绍了关于JS中6种打断点方式的相关资料,需要的朋友可以参考下
2022-04-04
微信小程序实现人脸识别登陆的示例代码
这篇文章主要介绍了微信小程序实现人脸识别登陆的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
微信js-sdk 录音功能的示例代码
这篇文章主要介绍了微信jsdk录音功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
谈谈对offsetleft兼容性的理解
offsetleft属性具有一定的兼容性问题，在IE7浏览器中，它的返回值是相对于最近的父类元素的左侧的距离，本文通过代码示例给大家介绍offsetleft兼容性问题，小伙伴们一起看看吧
2015-11-11
js实现显示手机号码效果
本文主要介绍了js实现显示手机号码效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
js变形金刚文字特效代码分享
这篇文章主要介绍了js变形金刚文字特效，实现效果超酷，很立体，感兴趣的小伙伴们可以参考一下
2015-08-08
JavaScript队列函数和异步执行详解
这篇文章主要为大家详细介绍了JavaScript队列函数和异步执行的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
浅析JavaScript中的array数组类型系统
除了对象之外，数组Array类型可能是javascript中最常用的类型了。而且，javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型，非常不错，感兴趣的朋友一起看下吧
2016-07-07
原生js canvas实现鼠标跟随效果
这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
javascript中Number的方法小结
本文介绍javascript中Number的使用方法，并对其进行了汇总，希望对大家有所帮助
2016-11-11