custom context menu retrieving table id

Question

custom context menu retrieving table id

Navigation

#1 by (1 votes)

0

Well, I'm trying to build a custom context menu that will work inside a register table. The problem is that I need to get the ID that is inside each line () and call it in the menu link (Edit.php? Id =).

Follow my code so you can see how it is getting.

    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><tablewidth="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>

Thanks for the help.

html jquery css context-menu

asked by anonymous 12.04.2016 / 16:22

1 answer

DIV misaligned when inserted text inside bind CSS in a Spring MVC project

score 1 · Accepted Answer

First I used the contextmenu function of the JQuery documentation and called it within the context of the TR in this way you have in hand how to get the ID related to the clicked TR. When the context menu is activated from within the table, I 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 only have 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