JavaScript利用键盘方向键(上下键)控制表格行选中
时间: 2023-08-24 19:07:24 浏览: 91
js 实现 用键盘上下键实现表格行的上下选择
5星 · 资源好评率100%
可以使用以下代码实现:
```javascript
// 获取表格元素
var table = document.getElementById('table');
// 获取表格行数和当前选中行索引
var rows = table.rows.length;
var index = 0;
// 监听键盘事件
document.onkeydown = function(e) {
// 判断按下的键是否为上下箭头
if (e.keyCode === 38 || e.keyCode === 40) {
// 取消当前选中行样式
table.rows[index].style.backgroundColor = '';
// 更新选中行索引
if (e.keyCode === 38) { // 上箭头
index = (index === 0) ? rows - 1 : index - 1;
} else { // 下箭头
index = (index === rows - 1) ? 0 : index + 1;
}
// 给选中行添加样式
table.rows[index].style.backgroundColor = 'yellow';
}
};
```
此代码监听键盘按下事件,如果按下的是上下箭头,则取消当前选中行的样式,根据上下箭头更新选中行索引,并给新选中行添加样式。注意要在HTML标签中给表格添加id属性,并将id值传给`getElementById()`方法。
阅读全文