table 中单击 jQuery contextMenu 的单元格的值

Question

考虑以下 jsfiddle。

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

<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 行调用上下文菜单，table 的 1 列应该给我值 R1C1。

Answer 1

这将获取点击的 td 元素内的文本：

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

Answer 2

您需要将 selector: 选项设为 select table 单元格。然后回调中的 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

table 中单击 jQuery contextMenu 的单元格的值

value of cell in a table where jQuery contextMenu was clicked

jquery

jquery-plugins