how to show edit button upon right click on table row
Question
Is it possible that i can show edit button after right clicking on row of a table? I wanted to inbuilt this functionality in my html page but i am not getting the idea how to do that. MY html page is like this
<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>johnrambo@mail.com</td>
<td>John</td>
<td>Rambo</td>
<td>
<a class="btn btn-mini btnEdit">Edit</a>
</td>
</tr>
<tr>
<td>peterparker@mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td>
<a class="btn btn-mini btnEdit">Edit</a>
</td>
</tr>
</tbody>
</table>
When i right click on the row of this table then it should show me edit buttin which i can use to edit the table. TO edit the table i have js file but that is other thing. Main thing I want to make the edit button visible after right click.And also I have use bootstrap to improve the visibility. Please help me to solve this problem.
4 answers
solution1
2 ACCPTED 2014-11-17 08:17:01
This code might help you:
on right clicking on specific <tr>
1) no default browser menu opens
2) Show/hide edit link
On clicking on document (both left and right)
1) hide edit link (can be changed accordingly)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.btnEdit{display:none;}
</style>
</head>
<body>
<table class="table table-hover table-bordered" id="tblData">
<thead>
<tr class ='abc' >
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id = 'John1' class ='abc'> <!-- id=username+userid -->
<td>johnrambo@mail.com</td>
<td>John</td>
<td>Rambo</td>
<td>
<a class="btn btn-mini btnEdit" href='asd.html' >Edit</a>
</td>
</tr>
<tr id = 'Peter1' class ='abc'>
<td>peterparker@mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td>
<a class="btn btn-mini btnEdit" id ="btnEdit" href='asd.html' >Edit</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
$(document).ready(function(){
$('.abc').contextmenu(function(){
$('.btnEdit').hide();
var id = $(this).attr('id');
$('#'+id+' .btnEdit').toggle();
return false;
});
$(document).click(function(){
$('.btnEdit').hide();
});
});
</script>
try it here http://jsfiddle.net/f5n9f4po/2/
solution2
1 2014-11-17 06:26:09
The event you're looking to capture is window.oncontextmenu . I'm pretty sure you can tie the event to right click by binding it to the tr tags.
(tr selector).oncontextmenu = function () {
toggleEditButton() // callback fn for showing your edit button
return false; // Prevents actual right click menu from showing up
};
Refer to this for more info.
solution3
0 2014-11-17 06:52:59
You can handle it using onmousedown event. When you press the mouse button this event will be fired and by checking it's keyCode you can find if it's the right mouse button.
This should serve your purpose.
HTML :
<div onmousedown="showEditButton(event);">Row Content</div>
<button id="editButton" style="display:none;">Edit</button>
javaScript :
function showEditButton(event){
event = event || window.event;
if(event.which == 3){
var button = document.getElementById("editButton");
button.style.display = 'block';
}
}
jQuery :
$("#editableContent").mousedown(function(event){
if(event.which == 3){
$("#editButton").show();
}
});
Resources :
solution4
0 2014-11-17 07:02:53
This answer is based on Making custom right-click context menus for my web-app implemented to work for your situation.
Here's the JQuery:
// 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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.