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

时间：2020-10-12 09:32:57|栏目：JavaScript代码|点击：次

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

上一篇：javascript制作照片墙及制作过程中出现的问题

栏目：JavaScript代码

下一篇：JavaScript 题型问答有答案参考

本文标题：键盘上下键移动选择table表格行的js代码

本文地址：http://www.codeinn.net/misctech/10234.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程