HTML在现有4行的表格单元格里按回车键,当光标走到最后一个单元格时,动态在当前表格下插入新行,并且在每次插入新行的单元格按回车键时,光标也能往下走的原生态js代码
时间: 2024-10-10 11:15:34 浏览: 37
HTML和JavaScript结合可以实现在表格中动态插入新行的功能。下面是一个简单的示例,展示了如何在现有的表格中使用JavaScript实现这个需求:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
</head>
<body>
<table id="dynamicTable">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<script>
// 获取表格元素
const table = document.getElementById('dynamicTable');
const newRow = table.insertRow(-1); // 插入新行到最后一行
// 获取新行中的第一个单元格
const newCell = newRow.insertCell(0);
let inputArea = newCell; // 初始化输入区域
function handleKeypress(event) {
if (event.key === 'Enter') { // 按下回车键
if (inputArea.nextSibling) {
// 如果有下一个兄弟节点,说明我们还在新行内,创建新的单元格并聚焦
const nextCell = newRow.insertCell();
inputArea = nextCell;
} else {
// 如果到达最后,创建新的一行并继续在第一列聚焦
newRow = table.insertRow(-1);
newCell = newRow.insertCell(0);
inputArea = newCell;
}
}
event.preventDefault(); // 阻止默认的换行行为
}
inputArea.addEventListener('keydown', handleKeypress); // 监听键盘事件
</script>
</body>
</html>
```
在这个例子中,每当用户在新行的最后一单元格按下回车键时,会自动在该行下方插入新单元格。如果到达了表尾,就再添加一行并在其中的第一个单元格继续接收输入。
阅读全文