Menu
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>[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>
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.
503
This code might help you:
<tr>
1) no default browser menu opens
2) Show/hide edit link
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>[email protected]</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>[email protected]</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/
96
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.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
