Datatables：指定列hover时显示带用户ID的子菜单问题

让我们一步步修复你的代码问题，同时实现你想要的功能：

首先，先明确原代码的核心问题 #

1. 事件绑定范围错误：你把mouseenter绑定到了整行<tr>，所以只要鼠标碰到行的任何地方都会触发，不符合“仅第1、2、3列悬停触发”的需求；而且mouseleave事件里的this参数绑定错误，导致移除子菜单的逻辑完全失效。
2. 子菜单布局与显示逻辑问题：直接把菜单append到<tr>里会打乱表格布局，而且没有处理菜单的定位和事件冒泡，导致显示隐藏异常。

完整修复方案 #

第一步：添加子菜单的CSS样式 #

先给子菜单加个基础样式，确保它能正确悬浮显示，不影响表格布局：

.user-submenu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 10px;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
}
.user-submenu a {
    margin: 0 4px;
    text-decoration: none;
    color: #333;
}
.user-submenu a:hover {
    color: #007bff;
}

第二步：修正JavaScript逻辑 #

// 先缓存DataTables实例，避免重复DOM查询
const table = $('#table-list-users').DataTable();

// 绑定鼠标进入事件到第1、2、3列的<td>（注意：CSS的nth-child从1开始计数，根据你的实际列位置调整）
$('#table-list-users tbody').on('mouseenter', 'tr td:nth-child(2), tr td:nth-child(3), tr td:nth-child(4)', function() {
    const $currentTd = $(this);
    const $currentTr = $currentTd.closest('tr');
    const rowData = table.row($currentTr).data();
    const userId = rowData[0]; // 获取第0列的user_id

    // 先移除当前行已存在的子菜单，避免重复添加
    $currentTr.find('.user-submenu').remove();

    // 构建带userId的完整菜单链接
    const subMenuHtml = `
        <div class="user-submenu">
            <a href="/MH_auth_admin/edit_user/${userId}">edit</a> |
            <a href="/MH_auth_admin/view_user/${userId}">view</a> |
            <a href="/MH_auth_admin/delete_user/${userId}">delete</a>
        </div>
    `;

    // 将菜单添加到当前行，并定位到当前td的下方
    const $subMenu = $(subMenuHtml).appendTo($currentTr);
    const tdOffset = $currentTd.offset();
    $subMenu.css({
        top: tdOffset.top + $currentTd.outerHeight(),
        left: tdOffset.left,
        display: 'block'
    });
});

// 绑定鼠标离开事件：当鼠标离开整行或子菜单时，移除菜单
$('#table-list-users tbody').on('mouseleave', 'tr', function() {
    $(this).find('.user-submenu').remove();
});

// 可选：阻止子菜单的mouseleave冒泡到tr，避免鼠标移到菜单上时突然消失
$('#table-list-users tbody').on('mouseenter', '.user-submenu', function(e) {
    e.stopPropagation();
});

关键修复点说明 #

1. 精准触发范围：把mouseenter事件绑定到指定列的<td>元素，通过nth-child(2), nth-child(3), nth-child(4)控制触发范围（如果你的第1列是表格的第一个可视列，把选择器改成nth-child(1), nth-child(2), nth-child(3)即可）。
2. 修复显示隐藏异常：
   • 修正了mouseleave的事件绑定目标，现在正确绑定到<tr>上；
   • 添加了事件冒泡阻止逻辑，确保鼠标移到子菜单上时不会触发行的mouseleave；
   • 使用绝对定位放置子菜单，完全不影响表格的原有布局；
   • 每次添加新菜单前先移除旧菜单，避免重复创建。
3. 完善菜单功能：把view和delete也改成带userId的动态链接，符合你的需求。

额外建议 #

• 对于删除操作，建议添加确认提示，比如给delete链接绑定click事件：

  $('#table-list-users tbody').on('click', '.user-submenu a[href*="delete_user"]', function(e) {
      if (!confirm('确定要删除该用户吗？')) {
          e.preventDefault();
      }
  });
  

• 如果你的表格有列隐藏/显示功能，建议用DataTables的列索引来定位，而不是CSS的nth-child，比如通过table.column(index).nodes()来获取指定列的td元素。

内容的提问来源于stack exchange，提问作者spreaderman