如何获取右键选择菜单项时光标所在的table tr元素

嗨，很高兴能帮你搞定这个问题！你的右键菜单基础功能已经跑起来了，现在只需要在触发右键时把对应的表格行存下来，之后点击菜单选项就能直接拿到它啦。

核心思路 #

当用户右键点击表格的<tr>元素时，我们把这个行元素暂存起来（可以用jQuery的data()方法，比全局变量更优雅），等用户点击右键菜单里的选项时，直接调用这个暂存的元素就行。

修改后的完整代码示例 #

首先假设你的右键菜单HTML结构大概是这样（如果不一样，只需要调整菜单选项的选择器就行）：

<div id="contextMenu" style="display:none; position:absolute; background:#fff; border:1px solid #ddd; border-radius:4px; padding:8px; box-shadow:0 2px 8px rgba(0,0,0,0.15);">
  <ul style="list-style:none; margin:0; padding:0;">
    <li class="menu-item" style="padding:4px 12px; cursor:pointer;">编辑该行</li>
    <li class="menu-item" style="padding:4px 12px; cursor:pointer;">删除该行</li>
  </ul>
</div>

然后是JavaScript代码：

$(function() {
  var $contextMenu = $("#contextMenu");

  // 监听表格行的右键点击事件
  $("body").on("contextmenu", "table tr", function(e) {
    // 把当前右键点击的tr元素存到右键菜单的data属性里
    $contextMenu
      .data("targetRow", $(this))
      .css({
        display: "block",
        left: e.pageX,
        top: e.pageY
      });
    return false; // 阻止浏览器默认右键菜单
  });

  // 监听右键菜单选项的点击事件
  $contextMenu.on("click", ".menu-item", function() {
    // 取出之前存的目标行元素
    var targetRow = $contextMenu.data("targetRow");
    
    if (targetRow) {
      // 这里就可以对目标行做任何操作啦！举几个例子：
      console.log("当前选中行的内容：", targetRow.text());
      // 给行添加高亮样式
      targetRow.css("background-color", "#f5f5f5");
      // 获取行的索引
      console.log("行索引：", targetRow.index());
    }

    // 点击菜单后隐藏菜单，并清除存储的行数据
    $contextMenu.hide().removeData("targetRow");
  });

  // 点击页面其他地方隐藏右键菜单
  $('html').click(function() {
    $contextMenu.hide().removeData("targetRow");
  });
});

代码说明 #

1. 存储目标行：在右键点击<tr>时，用$contextMenu.data("targetRow", $(this))把当前行元素存入右键菜单的临时数据中。
2. 调用目标行：点击菜单选项时，通过$contextMenu.data("targetRow")取出存储的行元素，之后就能随意操作它了。
3. 清理数据：隐藏菜单时记得用removeData("targetRow")清除存储的数据，避免后续误操作。

这样调整后，你就能在选择右键菜单选项时精准定位到对应的表格行啦！

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