JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table table-hover table-bordered" id="tblData">
<thead>
<tr>
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>[email protected]</td>
<td>John</td>
<td>Rambo</td>
<td> <a class="btn btn-mini btnEdit">Edit</a>
</td>
</tr>
<tr>
<td>[email protected]</td>
<td>Peter</td>
<td>Parker</td>
<td> <a class="btn btn-mini btnEdit">Edit</a>
</td>
</tr>
</tbody>
</table>
<ul class='custom-menu'>
<li data-action="edit">Edit</li>
</ul>
CSS
.btnEdit {
cursor: pointer;
}
.custom-menu {
display: none;
width: 50px;
text-align: center;
font-size: 12px;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
JavaScript
// Trigger action when the contexmenu is about to be shown
$('.btnEdit').bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide();
}
});
// If the menu element is clicked
$(".custom-menu li").click(function () {
// This is the triggered action name
switch ($(this).attr("data-action")) {
// A case for each action. Your actions here
case "edit":
alert("Edited!");
break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide();
});