在HTML表格中,要选择可编辑的单元格数据,可以使用JavaScript来实现。以下是一种实现方式:
<table>
<tr>
<td contenteditable="true">单元格1</td>
<td contenteditable="true">单元格2</td>
<td contenteditable="true">单元格3</td>
</tr>
<tr>
<td contenteditable="true">单元格4</td>
<td contenteditable="true">单元格5</td>
<td contenteditable="true">单元格6</td>
</tr>
</table>
<script>
var cells = document.querySelectorAll('td[contenteditable="true"]');
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener('keydown', function(event) {
if (event.keyCode === 9) { // Tab键的keyCode为9
event.preventDefault(); // 阻止默认的Tab键行为
var currentIndex = Array.prototype.indexOf.call(cells, this);
var nextIndex = currentIndex + 1;
if (nextIndex >= cells.length) {
nextIndex = 0;
}
cells[nextIndex].focus(); // 将焦点移动到下一个可编辑的单元格
}
});
}
</script>
通过以上代码,当按下Tab键时,焦点会从当前单元格移动到下一个可编辑的单元格。如果到达表格的最后一个可编辑单元格,则焦点会回到第一个可编辑单元格。
这种方式可以实现在HTML表格中使用Tab键从一个单元格移动到另一个单元格的功能。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云