如何在表格右键菜单中获取隐藏列的成员记录ID并使用

数据老陈

2026-6-1

问题描述

我有一个包含13列成员信息的表格，已经用JavaScript实现了表格每行的右键自定义菜单功能。表格的第一列为隐藏列，存储着每位成员的唯一记录ID，现在希望获取该隐藏列的ID值并存入名为id-column-one的变量，以便点击右键菜单的「查看」选项时打开对应成员的详情页面，请问该如何实现？以下是我的代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<ul class='custom-menu'>
  <li data-action="View">View</li>
  <li data-action="Renew">Renew</li>
  <li data-action="Amend">Amend</li>
</ul>

</body>
</html>
<script>


// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
    
    // Avoid the real one
    event.preventDefault();
   
    // Show contextmenu
    $(".custom-menu").finish().toggle(100).
    
    // In the right position (the mouse)
    css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
});


// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
    
    // If the clicked element is not the menu
    if (!$(e.target).parents(".custom-menu").length > 0) {
        
        // Hide it
        $(".custom-menu").hide(100);
    }
});


// If the menu element is clicked
$(".custom-menu li").click(function(){
  
    // This is the triggered action name
    switch($(this).attr("data-action")) {
       
        // A case for each action. Your actions here
        case "View": window.open("https://url/memb-details-all/"id-column-one); break;
        case "Renew": alert("Renew"); break;
        case "Amend": alert("Amend"); break;
    }
  
    // Hide it AFTER the action was triggered
    $(".custom-menu").hide(100);
  });
    </script>

解决方案

你需要在右键菜单触发时定位到当前点击的表格行，提取隐藏列的ID并暂存，之后在点击「View」菜单时使用该ID拼接跳转链接。具体修改如下：

1. 右键触发时提取并暂存ID

在contextmenu事件处理中，通过点击元素定位到所属表格行，提取第一列的ID值并存入变量，确保后续菜单点击时能获取到对应行的ID。

2. 菜单点击时使用ID拼接链接

点击「View」选项时，用暂存的ID拼接完整的详情页URL，实现精准跳转。

修改后的完整代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<ul class='custom-menu'>
  <li data-action="View">View</li>
  <li data-action="Renew">Renew</li>
  <li data-action="Amend">Amend</li>
</ul>

<!-- 示例表格结构（需与你的实际表格匹配） -->
<table>
  <tr>
    <td style="display:none">1001</td> <!-- 隐藏的ID列 -->
    <td>Member Name</td>
    <!-- 其余11列成员信息 -->
  </tr>
</table>

</body>
</html>
<script>
// 暂存当前右键点击行的ID
let idColumnOne = '';

// 右键菜单触发事件
$(document).bind("contextmenu", function (event) {
    // 定位到右键点击的表格行
    const targetRow = $(event.target).closest('tr');
    if (targetRow.length) {
        // 提取第一列（隐藏列）的ID值
        idColumnOne = targetRow.find('td:first').text().trim();
    } else {
        // 点击位置不在表格行时清空ID
        idColumnOne = '';
    }

    event.preventDefault();
    // 显示自定义菜单
    $(".custom-menu").finish().toggle(100).css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
});

// 点击页面其他区域隐藏菜单
$(document).bind("mousedown", function (e) {
    if (!$(e.target).parents(".custom-menu").length > 0) {
        $(".custom-menu").hide(100);
    }
});

// 菜单选项点击事件
$(".custom-menu li").click(function(){
    switch($(this).attr("data-action")) {
        case "View": 
            if (idColumnOne) {
                // 拼接ID并打开详情页
                window.open(`https://url/memb-details-all/${idColumnOne}`);
            }
            break;
        case "Renew": alert("Renew"); break;
        case "Amend": alert("Amend"); break;
    }
    $(".custom-menu").hide(100);
});
</script>

关键说明

$(event.target).closest('tr')：通过点击元素向上查找最近的表格行，确保定位到右键触发的目标行。
targetRow.find('td:first').text().trim()：获取该行第一列（隐藏列）的文本内容，trim()用于去除多余空格。
全局变量idColumnOne暂存ID，点击「View」时先判断ID是否存在，避免无效跳转。

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