本文整理自网络,侵删。 两段使用键盘的上下键进行选择的代码: 第一段 <Script Language="JScript"> function document.onkeydown(){ var rowsArray = document.all('oTable').rows; for(var i=0;i<rowsArray.length;i++){ if(rowsArray[i].children[0].style.backgroundColor=='#dcdcdc'){ switch(window.event.keyCode){ case 38 : if(i-1>=0){ rowsArray[i-1].children[0].style.backgroundColor = '#dcdcdc'; rowsArray[i].children[0].style.backgroundColor = ''; } break; case 40 : if(i+1<=rowsArray.length-1){ rowsArray[i+1].children[0].style.backgroundColor = '#dcdcdc'; rowsArray[i].children[0].style.backgroundColor = ''; } break; } break; } } } function document.onclick(){ if(window.event.srcElement.tagName!='TD'){ return; } var rowsArray = document.all('oTable').rows; for(var i=0;i<rowsArray.length;i++){ if(rowsArray[i].cells[0]==window.event.srcElement){ rowsArray[i].cells[0].style.backgroundColor = '#dcdcdc'; }else{ rowsArray[i].cells[0].style.backgroundColor = ''; } } } </Script> <style> TD { cursor: hand; } </style> <table id="oTable" style="width:240px;border:1px highlight solid; font-size:12px;"> <tr> <td style="background-color:#dcdcdc;">鼠标点击或按↑↓改变行的颜色</td> </tr> <tr> <td>鼠标点击或按↑↓改变行的颜色</td> </tr> <tr> <td>鼠标点击或按↑↓改变行的颜色</td> </tr> <tr> <td>鼠标点击或按↑↓改变行的颜色</td> </tr> </table> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]第二段 <table id="tb"> <tr><td>00000000000000</td> </tr> <tr><td>11111111111111</td> </tr> <tr><td>22222222222222</td></tr> <tr><td>33333333333333</td></tr> </table> <script> var i=0; function document.onkeydown(){ if (event.keyCode == 38){ for(var k=0;k<document.getElementById('tb').rows.length;k++){ document.getElementById('tb').rows(k).bgColor=""; } document.getElementById('tb').rows(--i%tb.rows.length).bgColor="#FF0000"; document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText; } if (event.keyCode== 40){ for(var k=0;k<document.getElementById('tb').rows.length;k++){ document.getElementById('tb').rows(k).bgColor=""; } document.getElementById('tb').rows(++i%document.getElementById('tb').rows.length).bgColor="#FF0000"; document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText; } } </script> <input type="text" name="show" value="do"> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行] 更多ECSHOP内容来自木庄网络博客 标签:ECSHOP 相关阅读 >> php无限级分类实现方法分析 微信小程序实现获取准确的腾讯定位地址功能示例 支付宝怎么关闭消息提醒 支付宝关闭所有消息通知教程 ECSHOP后台拿shell方法总结 ECSHOP 2.72如何修改后台访问地址 遍历echsop的region表形成缓存的程序实例代码 discuz!x中session机制实例详解 laravel 验证码认证学习记录小结 ECSHOP用户中心的订单详情页显示商品缩略图的方法 php支付系统设计与典型案例分享 更多相关阅读请进入《ECSHOP》频道 >> 转载请注明出处:木庄网络博客 » javascript键盘上下键的操作(选择) 标签:ECSHOP 打赏 感谢您的支持,我会继续努力的! 扫码打赏,您说多少就多少 打开支付宝扫一扫,即可进行扫码打赏哦 分享从这里开始,精彩与您同在 相关推荐 帝国cms系统的信息ID从1开始的实现方法 PHPCMS V9日期时间格式化标签适用全站 Discuz! X1.5 防CC脚本设置方法 删除dedecms 5.7里面烦人的织梦链的方法 phpcms v9去除盛大连接 关闭盛大通行证的修改方法 dedecms按栏目名首字母数字排序输出的实现方法 PHP简单实现无限级分类的方法 读取mysql一个库下面的所有的表table 评论 管理员已关闭评论功能... 欢迎访问木庄网络博客 可复制:代码框内的文字。 方法:Ctrl+C。