html当光标在当前行的某一列怎样获取当前行的上下两行同一列的单元格js原生态代码
时间: 2024-09-19 13:16:50 浏览: 36
在HTML中,如果你想要通过JavaScript获取光标所在行以及上下两行同一列的单元格信息,你可以使用`window.getSelection()`方法来获取选区,然后遍历DOM节点。以下是一个简单的示例,假设你的表格结构类似这样:
```html
<table id="myTable">
<tr>
<td>cell_1</td>
<td>cell_2</td>
</tr>
<!-- 其他行... -->
<tr>
<td>current_cell</td>
<!-- 上下一行类似 -->
</tr>
</table>
<script>
// 获取选区
var selection = window.getSelection();
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
var commonAncestorContainer = range.commonAncestorContainer;
// 确保在表格内
if (commonAncestorContainer && commonAncestorContainer.tagName.toLowerCase() === 'td') {
var row = commonAncestorContainer.parentNode;
// 获取当前行和上下两行的同一列元素
var currentCell = row.cells[range.startOffset];
var upCell = row.previousElementSibling ? row.previousElementSibling.cells[range.startOffset] : null; // 如果没有上一行,则upCell为空
var downCell = row.nextElementSibling ? row.nextElementSibling.cells[range.startOffset] : null; // 同理,如果没有下一行
console.log({
currentCellContent: currentCell.textContent,
upCellContent: upCell ? upCell.textContent : 'None',
downCellContent: downCell ? downCell.textContent : 'None'
});
}
}
</script>
```
这个例子假设表格每行有两列,`range.startOffset`表示光标位置。注意这只是一个基本的实现,实际应用中可能需要处理更复杂的表格结构。
阅读全文