jquery - 单击 jQuery contextMenu 的表中单元格的值

Question

考虑以下jsfiddle .

它使用 jQuery contextMenu显示添加到表格主体的右键单击上下文菜单。

<table border="1">
  <tbody class="context-menu-one">
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
    </tr>
    <tr>
      <td>R2C1</td>
      <td>R1C2</td>
    </tr>
  </tbody>
</table>

这是 jQuery:

$(function() {
    $.contextMenu({
        selector: '.context-menu-one',
        callback: function(key, options) {
            var clickedKey= key;
            //How to get the Value of the clicked cell here ?
            var  m = $(options.$trigger).text();
            window.console && console.log(m) || alert(m);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "delete": {name: "Delete", icon: "delete"},
        }
    });

    $('.context-menu-one').on('click', function(e){
        console.log('clicked', this);
    })
});

如何获取调用上下文菜单的单元格的值？

例如，通过单击表格的第 1 行、1 列来调用上下文菜单应该给我值 R1C1。

Answer 1

您需要使选择器:选项选择表格单元格。然后回调中的 this 将是您单击的单元格。

$(function() {
    $(".context-menu-one").contextMenu({
        selector: 'td',
        callback: function(key, options) {
            var content = $(this).text();
            alert("You clicked on: " + content);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "delete": {name: "Delete", icon: "delete"},
        }
    });
});

DEMO