Effect of the menu within the table

Question

Effect of the menu within the table

Navigation

#1 by (3 votes)

0

By clicking the right mouse button on the word menu a small menu opens. How do I make it happen inside the table's row property?

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

javascript html jquery css

asked by anonymous 12.04.2016 / 21:33

1 answer

How to send an email from a form in an HTML site? How to know the current route in Laravel 4?

score 3 · Accepted Answer

I did this: I only changed its selector that was taking document to $("tr") that takes any row in the table and added a ternary operator to test the button mouse was clicked and perform the action!

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

To answer this question, just add the following line in Jquery

$(".menu").html("Link " + (this.rowIndex+1) + "<br> Link " + (this.rowIndex+2));