0

Tenho uma tabela de dados, onde cada linha é um registro. Quero fazer como o Windows ou o One Drive/Outlook etc.. Ao clicar com o botão direito do mouse no item da tabela abrir um menu com as opções "Apagar" "Editar" e "Ocultar".

Andei pesquisando sobre essas interações com o botão direito mas só encontrei equivalente a desabilitar o clique dele na página toda..

Como seria aplicado esse conceito só que para exibir o menu..

O cenário é:

Uma tabela com colunas ID e Nome , a cada linha tenho um ID e Nome, ao clicar com o botão direito em uma linha é aberto um menu com as opções "Editar", "Apagar", "Ocultar", onde cada opção é um link, como: "editar.php?id=ID", onde ID é o número da primeira coluna.

Não coloquei código porque não consegui implementar nada parecido e a tabela é uma tabela comum.

3
  • 1
    Ivcs, acho que você passou pelo mesmo problema que eu, você sabe o que quer, mas não sabe o nome do que quer. Dê uma pesquisada por "menu de contexto customizado".
    – Rubico
    Commented 17/03/2016 às 7:16
  • 1
    Isto se chama contextmenu, tem uma pergunta aqui que te ajuda a criar um pt.stackoverflow.com/questions/112469/… Commented 17/03/2016 às 11:09
  • Eu sabia que era o contextmenu, mas não consigo aplicar em um elemento, apenas na página toda.
    – Leonardo
    Commented 17/03/2016 às 22:04

3 Respostas 3

2

Ivcs, eu utilizaria algo parecido com esse código. E adicionaria uma ação para cada um dos botões:

 var menu = document.querySelectorAll(".menu");
    if (document.addEventListener) {
      document.addEventListener('contextmenu', function(e) {
        menu[0].style.display = 'block';
        menu[0].style.marginLeft = e.clientX + 'px';
        menu[0].style.marginTop = e.clientY + 'px';
        e.preventDefault();
      }, false);
    } else {
      document.attachEvent('oncontextmenu', function() {
        menu[0].style.display = 'block';
        menu[0].style.marginLeft = e.clientX + 'px';
        menu[0].style.marginTop = e.clientY + 'px';
        window.event.returnValue = false;
      });
    }
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
      display: none;
    }
    
    li a {
      display: block;
      color: #000;
      padding: 8px 0 8px 16px;
      text-decoration: none;
    }
    
    
    /* Change the link color on hover */
    
    li a:hover {
      background-color: #555;
      color: white;
    }
    <ul class="menu">
      <li><a id="apagar" href="#">Apagar</a></li>
      <li><a id="editar" href="#">Editar</a></li>
      <li><a id="ocultar" href="#">Ocultar</a></li>
    </ul>

Esse resposta é uma adaptação da resposta dada pelo usuário Gabriel Rodrigues.

1

Usei essa biblioteca é simples, porém tem algumas limitações (como os poucos ícones):

http://swisnl.github.io/jQuery-contextMenu/index.html

0

var menu = document.querySelectorAll(".menu");
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    menu[0].style.display = 'block';
    menu[0].style.marginLeft = e.clientX + 'px';
    menu[0].style.marginTop = e.clientY + 'px';
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    menu[0].style.display = 'block';
    menu[0].style.marginLeft = e.clientX + 'px';
    menu[0].style.marginTop = e.clientY + 'px';
    window.event.returnValue = false;
  });
}
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
      display: none;
    }
    
    li a {
      display: block;
      color: #000;
      padding: 8px 0 8px 16px;
      text-decoration: none;
    }
    
    
    /* Change the link color on hover */
    
    li a:hover {
      background-color: #555;
      color: white;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p> Clique com o botão direito </p>
<ul class="menu">
      <li><a id="apagar" href="#">Apagar</a></li>
      <li><a id="editar" href="#">Editar</a></li>
      <li><a id="ocultar" href="#">Ocultar</a></li>
</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .