JavaScript实现键盘上下键控制表格行高亮
作者:纸飞机时间:2026-10-22 17:38:28浏览:626
本文介绍了如何使用JavaScript监听键盘上下键事件,实现表格行的动态高亮选择。通过捕获按键代码,动态改变当前选中行的背景色,并支持鼠标点击与键盘操作同步更新选中状态,适用于需要键盘导航的Web界面场景。
JavaScript实现键盘上下键控制表格行高亮
以下展示两段利用键盘上下键实现行选择的JavaScript代码示例:
第一段代码示例
<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> <input type="text" name="show" value="do"> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
