Custom context menu recovering table id

Question

Good guys I’m trying to set up a custom context menu that will work within a registration table. The problem is that I need to take the ID inside each line () and call it in the menu link (Edit.php? id=).

Follow my code so you can see how it’s turning out.

    window.addEventListener('contextmenu', function (e) {
        $('.rightclickmenu').css({
            "margin-left": e.clientX,
            "margin-top": e.clientY
        }).show();

        e.preventDefault();
        window.addEventListener('click', function () {
            $('.rightclickmenu').hide();
        });
    });

<style>
    .rightclickmenu {
        border: 1px solid #000;
        position:absolute;
        z-index:1;
        font: 11px sans-serif;
        display:none;
    }
    #rightclickobject {
        padding: 10px;
        width: 100px;
        border-bottom: 1px solid #eee;
        cursor:pointer;
    }
    #rightclickobject:hover {
        background:#eee;
    }
</style>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<table width="100%" border="1">
    <tr>
        <td id='1'>ID:1</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
    <tr>
        <td id='2'>ID:2</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
</table>

<div class="rightclickmenu">
    <div id="rightclickobject" onclick="window.open('Editar.php?id=')">Editar</div>
    <div id="rightclickobject" onclick="window.open('Apagar.php?id=')">Apagar</div>
</div>

I appreciate the help.

Answer 1

I first used the contextmenu function of the Jquery documentation and called it within the TR context so Voce has in hand how to get the ID of the clicked TR. When the context menu is activated from within the table, force stopPropagation to prevent the Window event from being called and lose the reference to the line and consequently the desired ID.

$(document).ready(function(){

    $('tr').contextmenu(function(e){
        var jqTR = $(this);

      var idTarget = jqTR.find('td:first').prop('id');

      $('#rightclickobjectEditar').off('click');
        $('#rightclickobjectEditar').on('click',function(){
        window.open('Editar.php?id=' + idTarget);
      });

      $('#rightclickobjectApagar').off('click');
        $('#rightclickobjectApagar').on('click',function(){
        window.open('Apagar.php?id=' + idTarget);
      });

      $('.rightclickmenu').css({
        "margin-left": e.clientX,
        "margin-top": e.clientY
        }).show();

        e.stopPropagation();
        e.preventDefault();
    })
});

It was also necessary to modify the id of the "rightclickobject" because there were two with the same name and id should have only one name for the whole document.

<div class="rightclickmenu">
    <div id="rightclickobjectEditar">Editar</div>
    <div id="rightclickobjectApagar">Apagar</div>
</div>

Below is the Jsfiddle of the solution

JSFIDDLE