html表格单元格绑定左右键的js代码
时间: 2024-09-17 17:04:42 浏览: 35
动态创建的表格单元格中的事件实现代码
HTML表格单元格通常不会直接绑定键盘事件,比如左右箭头键。但在JavaScript中,你可以利用`addEventListener`方法给每个单元格添加这样的功能。以下是一个简单的例子,当用户按左或右箭头键时,会在相邻的单元格间切换:
```javascript
// 获取所有表格单元格
var tableCells = document.getElementsByTagName("td");
// 遍历单元格并添加事件监听器
for (var i = 0; i < tableCells.length; i++) {
tableCells[i].addEventListener("keydown", function(event) {
// 检查是否按下的是左右箭头键
if (event.key === "ArrowLeft") { // 左箭头
// 跳转到左边的兄弟节点,如果没有则停止
var nextCell = this.previousSibling;
if (nextCell) {
nextCell.focus();
event.preventDefault(); // 阻止默认行为,防止页面滚动
}
} else if (event.key === "ArrowRight") { // 右箭头
// 跳转到右边的兄弟节点,如果没有则停止
var nextCell = this.nextSibling;
if (nextCell) {
nextCell.focus();
event.preventDefault();
}
}
});
}
```
阅读全文