如何获取contextmenu点击的项目值

时间:2018-02-08 07:51:06

标签: javascript jquery

我已成功构建了一个表格,但我希望右键单击tr.id,即tr.data-id

我尝试做的是,右键单击我要显示刷新菜单,点击刷新我想获取data-id然后刷新该行。

以下是我的演示:https://jsfiddle.net/eabangalore/5d9emyx3/3/



$(function(){

   $.ajax({
      url:'https://jsonplaceholder.typicode.com/posts/1/comments',
      type:'get',
      dataType:'json',
      success:function(data){
       let s = data.map((e,i)=>
           `<tr data-id="${e.id}"><td>${e.name}</td><td>${e.email}</td></tr>`
         ).join('');
         
        $('#data').append(s);
      }
    });
    
    
 $('#data tbody').bind("contextmenu", function(event) {   
            event.preventDefault();
            
            // trying here to get data-id
            
            alert($(this).data('id')); // why null
            
            $('.custom-menu').remove();
            $('<div class="custom-menu">Refresh</div>')
                .appendTo("body")
                .css({top: event.pageY + "px", left: event.pageX + "px"});
        }).bind("click", function(event) {
            $("div.custom-menu").hide();
        });

});
&#13;
.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px; 
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="data">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </tfoot>
</table>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

虽然这是对的,哈哈哈......

用一个小时来解决你的问题。但是,你可以在这里看到我的答案。

$(function() {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/1/comments',
        type: 'get',
        dataType: 'json',
        success: function(data) {
            let s = data.map((e, i) =>
                `<tr data-id="${e.id}"><td>${e.name}</td><td>${e.email}</td></tr>`
            ).join('');

            $('#data').append(s);
        }
    });

    $('#data tbody').bind("contextmenu", function(event) {
        event.preventDefault();

        // trying here to get data-id
        var cObj = $(event.target);
        if (cObj && cObj.closest('tr').length > 0)
          console.log(cObj.closest('tr').data('id')); // why null

        $('.custom-menu').remove();
        $('<div class="custom-menu">Refresh</div>')
            .appendTo("body")
            .css({
                top: event.pageY + "px",
                left: event.pageX + "px"
            });
    }).bind("click", function(event) {
        $("div.custom-menu").hide();
    });
});
.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="data">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </tfoot>
</table>

答案 1 :(得分:0)

您可以使用以下代码获取数据ID:

 openssl pkcs7 -in whatever.spc -inform der -print_certs \
 | openssl pkcs12 -export -inkey keyfile.pem -out newfile.pfx