鼠标右键点击table中的一条数据,弹出一个菜单选项
时间: 2024-03-13 12:44:53 浏览: 53
您可以使用以下代码实现在鼠标右键点击表格中的一条数据时弹出菜单选项:
```javascript
// 获取表格元素
const table = document.querySelector('table');
// 监听鼠标右键点击事件
table.addEventListener('contextmenu', e => {
e.preventDefault(); // 阻止默认菜单弹出
// 获取点击的行和列
const row = e.target.parentNode;
const column = e.target;
// 创建菜单元素
const menu = document.createElement('div');
menu.classList.add('menu');
menu.innerHTML = `
<ul>
<li>编辑</li>
<li>删除</li>
</ul>
`;
// 设置菜单位置
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
// 监听菜单选项点击事件
menu.querySelectorAll('li').forEach(item => {
item.addEventListener('click', () => {
// 根据点击的选项执行相应操作
if (item.innerText === '编辑') {
// 编辑操作
} else if (item.innerText === '删除') {
// 删除操作
}
// 隐藏菜单
menu.remove();
});
});
// 将菜单添加到页面中
document.body.appendChild(menu);
});
```
这段代码会在表格上监听鼠标右键点击事件,当点击时获取所在行和列,创建菜单元素并设置位置,然后在菜单选项点击时执行相应的操作。
阅读全文