JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<table width="100%" border="1" >
<tr id="1">
<td>ID:1</td>
<td>Nome</td>
<td>Idade</td>
</tr>
<tr id="2">
<td>ID:2</td>
<td>Nome</td>
<td>Idade</td>
</tr>
<tr id="3">
<td>ID:3</td>
<td>Nome</td>
<td>Idade</td>
</tr>
</table>
<div class="menu_pai" id="menu1">
<div class="menu">
link 1
</div>
</div>
<div class="menu_pai" id="menu2">
<div class="menu">
link 2
</div>
</div>
<div class="menu_pai" id="menu3">
<div class="menu">
link 3
</div>
</div>
CSS
.menu_pai{
display: none;
}
JavaScript
document.oncontextmenu = function () {
return false;
};
$("tr").mousedown(function (e) {
// Define a posição do menu
$('.menu_pai').css({
"margin-left": e.clientX,
"margin-top": e.clientY
}).show();
// Exibe o menu
if (e.button === 2) {
$("#menu"+this.id).show();
$(".menu_pai:not(#menu"+this.id+")").hide();
} else {
$(".menu_pai").hide();
}
});