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

时间:2021-09-27 22:15:45

Consider the following jsfiddle.

考虑以下jsfiddle。

It uses jQuery contextMenu to display a right-click context menu as added to the table body.

它使用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>

Here's the jQuery:

这是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);
    })
});

How do i get the value of the cell where the context menu is invoked ?

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

For example, invoking of context menu by clicking in the 1st row, 1 column of the table should give me the value R1C1.

例如,通过单击第1行调用上下文菜单,表的1列应该给出值R1C1。

2 个解决方案

#1


4  

You need to make the selector: option select the table cells. Then this in the callback will be the cell that you clicked on.

您需要创建选择器:选项选择表格单元格。然后在回调中这将是您单击的单元格。

$(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

DEMO

#2


0  

This will get the text inside the clicked td element:

这将获取单击的td元素中的文本:

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

#1


4  

You need to make the selector: option select the table cells. Then this in the callback will be the cell that you clicked on.

您需要创建选择器:选项选择表格单元格。然后在回调中这将是您单击的单元格。

$(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

DEMO

#2


0  

This will get the text inside the clicked td element:

这将获取单击的td元素中的文本:

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