0

Galera, ao clicar com o botão direito do mouse sobre a palavra menu um pequeno menu se abre. Como faço para isso acontecer dentro da propriedade (linha) da tabela?

   document.oncontextmenu = function() {return false;}; //não deixa abrir o menu ao clicar

 $('.menu_pai').mousedown(function(e){ 
    if( e.button == 2 ) { //verifica se é o botão direito
    	$(this).find('.menu').show();//mostra a div filha
    } 
  }); 
  $(document).mousedown(function(e) {
    if (e.button != 2) {
        $('.menu').hide();
    }
});
.menu{
  display: none;
}
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<table width="100%" border="1" >
    <tr>
        <td>ID:1</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
   
</table>

<div class="menu_pai">
    Menu
    <div class="menu">
      link1 <br> link2
    </div>
</div>

5
  • 1
    Você quer que esse menu abra dentro da linha?
    – Igor Mello
    Commented 12/04/2016 às 19:55
  • Sua pergunta não está clara o suficiente, sugiro editar a pergunta. Commented 12/04/2016 às 20:04
  • Igor Mello quero que seja assim. ao clicar com o botão direito a div aparece fora da linha. O complicado e fazer ela aparecer, o posicionamento eu vou arrumar com css. Commented 12/04/2016 às 20:07
  • @HugoBorges Ao clicar com o botão direito em cima da linha/coluna?
    – Igor Mello
    Commented 12/04/2016 às 20:09
  • ao clicar em toda a linha Commented 12/04/2016 às 20:11

1 Resposta 1

3

Fiz da seguinte forma: somente alterei o seu seletor que estava pegando o document para $("tr") que pega qualquer linha da tabela e adicionei um operador ternário para fazer o teste de qual botão do mouse foi clicado e executar a ação!

//não deixa abrir o menu de contexto ao clicar com o botão direito
document.oncontextmenu = function() {return false;}; 

$("tr").mousedown(function(e) {
  $(".menu").html("Link " + (this.rowIndex+1) + "<br> Link " + (this.rowIndex+2));
  (e.button == 2) ? $(".menu").show() : $(".menu").hide();
});

 
.menu{
  display: none;
}
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<table width="100%" border="1" >
    <tr>
        <td>ID:1</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
    <tr>
        <td>ID:2</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
</table>

<div class="menu_pai">
    <div class="menu">
      
    </div>
</div>

Update

Para atender esta sua última dúvida basta adicionar a seguinte linha no Jquery

$(".menu").html("Link " + (this.rowIndex+1) + "<br> Link " + (this.rowIndex+2));
4
  • muito bom mesmo ;) tenho uma dúvida, como faço para o jQuery verificar automaticamente quanto <tr> tem a tabela, e para cada um abrir uma div pai: exemplo jsfiddle.net/0d3ketxk/4 Commented 12/04/2016 às 23:28
  • @HugoBorges Se a resposta está correta por favor sinalizar como certa para ajudar outros que tenham a mesma dúvida! Dei um update na resposta, olha se atende esta tua última dúvida?
    – Igor Mello
    Commented 13/04/2016 às 1:13
  • muito bom, esta perfeito, a única com que esta faltando e fazer a div aparecer na mesma posição so cursor do mouse, tem como fazer isso? Commented 13/04/2016 às 11:16
  • pronto ja editei a resposta, muito obrigado Commented 13/04/2016 às 11:41

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 .