如何实现右键DataTable行时弹出上下文菜单并获取首单元格内容？

核心修改思路 #

在右键点击事件中复用左键获取行数据的逻辑，同时完成菜单弹出和首单元格内容的获取，确保后续Ajax请求能拿到正确的ID值。

修改后的完整代码 #

$(document).ready(function () {
    var table = $('#tasksTable').DataTable({
        "columnDefs": [
            { "className": "dt-left", "targets": "_all" }
        ],
        select: true
    });

    // 存储当前右键点击行的首单元格ID
    let clickedRowId;

    $('#tasksTable tbody')
        // 左键点击获取行数据
        .on('click', 'tr', function () {
            console.log(table.row(this).data()[0]);
        })
        // 右键点击：弹出菜单 + 获取首单元格ID
        .on('contextmenu', 'tr', function (e) {
            // 关闭已打开的菜单
            $(".context-menu").hide();
            
            // 用DataTables API获取当前行的首单元格内容（和左键逻辑一致）
            clickedRowId = table.row(this).data()[0];
            console.log('右键点击的行ID: ' + clickedRowId);
            
            // 选中当前行（可选，提供视觉选中反馈）
            table.row(this).select();

            // 设置菜单位置并显示
            var top = e.pageY + 5;
            var left = e.pageX;
            $(".context-menu").toggle(100).css({
                top: top + "px",
                left: left + "px"
            });

            // 阻止浏览器默认右键菜单
            return false;
        });

    // 点击页面其他区域关闭菜单
    $(document).on('click contextmenu', function () {
        $(".context-menu").hide();
    });

    // 锁定任务：传入右键获取的ID发起Ajax请求
    $(".lockTask").click(function () {
        if (clickedRowId) {
            LockTaskToggle(clickedRowId);
            console.log('发起锁定请求，ID: ' + clickedRowId);
        } else {
            console.log('未选中任何行');
        }
    });

    // 解锁任务逻辑（按需补充）
    $(".unlockTask").click(function () {
        if (clickedRowId) {
            // 补充解锁的Ajax逻辑
            console.log('发起解锁请求，ID: ' + clickedRowId);
        }
    });

    // LoadTasksAjax();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<!-- 补充上下文菜单的DOM结构 -->
<div class="context-menu" style="display:none; position:absolute; background:#fff; border:1px solid #ccc; padding:8px;">
    <button class="lockTask">锁定任务</button>
    <button class="unlockTask">解锁任务</button>
</div>
<table id="tasksTable" class="display compact hover" style="width:100%; height:100%;">
    <thead>
        <tr class="datarow">
            <th>Id</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Date of Birth</th>  
            <th>Locked By</th>
            <th></th>
        </tr>
    </thead>      
</table>

关键修改说明 #

1. 统一数据获取逻辑：右键事件中直接使用table.row(this).data()[0]获取首单元格内容，和左键点击逻辑完全一致，避免了用textContent取数据的错误。
2. 存储点击行ID：声明变量存储右键获取的ID，方便后续锁定/解锁按钮调用。
3. 视觉选中反馈：右键点击时调用table.row(this).select()，让当前行高亮，提升用户体验。
4. 规范事件绑定：把bind替换为jQuery推荐的on方法，保持代码风格统一。
5. 补充菜单DOM：补上上下文菜单的基础结构，确保菜单能正常显示。

可选优化（避免全局变量） #

如果不想用全局变量，可以把ID存储到菜单的data属性中：

// 右键事件中
$(".context-menu").data('row-id', clickedRowId).toggle(100).css(...);

// 锁定按钮点击时
let id = $(".context-menu").data('row-id');
LockTaskToggle(id);

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