html在表格单元格嵌套的表格元素添加键盘上下键的js代码
时间: 2024-12-19 21:05:46 浏览: 4
在HTML表格单元格中嵌套表格元素并添加键盘上下键的JavaScript代码,可以通过以下步骤实现:
1. **创建主表格**:首先创建一个主表格,并在其中一个单元格中嵌套一个子表格。
2. **编写JavaScript代码**:编写JavaScript代码来监听键盘事件,并根据按键来移动表格中的焦点。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Keyboard Navigation</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
.focused {
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table id="nestedTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>Another Cell</td>
</tr>
</table>
<script>
document.addEventListener('DOMContentLoaded', function() {
const nestedTable = document.getElementById('nestedTable');
const cells = nestedTable.getElementsByTagName('td');
let focusedIndex = 0;
// Initialize focus
cells[focusedIndex].classList.add('focused');
document.addEventListener('keydown', function(e) {
cells[focusedIndex].classList.remove('focused');
switch(e.key) {
case 'ArrowUp':
focusedIndex = (focusedIndex - 2 + cells.length) % cells.length;
break;
case 'ArrowDown':
focusedIndex = (focusedIndex + 2) % cells.length;
break;
case 'ArrowLeft':
focusedIndex = (focusedIndex - 1 + cells.length) % cells.length;
break;
case 'ArrowRight':
focusedIndex = (focusedIndex + 1) % cells.length;
break;
default:
return;
}
cells[focusedIndex].classList.add('focused');
});
});
</script>
</body>
</html>
```
### 代码说明:
1. **HTML结构**:主表格中有一个嵌套的子表格,子表格有两个单元格。
2. **CSS样式**:定义了一个`.focused`类来高亮显示当前聚焦的单元格。
3. **JavaScript逻辑**:
- 初始化时,给第一个单元格添加`.focused`类。
- 监听键盘事件,根据按键(上下左右箭头)移动焦点。
通过上述代码,您可以在嵌套的表格单元格中实现键盘导航功能。
阅读全文