5

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.enter image description here

user2409128
  • 471
  • 1
  • 10
  • 21

4 Answers4

2

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/

PHP Worm...
  • 4,109
  • 1
  • 25
  • 48
1

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.

Xenyal
  • 2,136
  • 2
  • 24
  • 51
0

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';        
    }
}

jsFiddle - javaScript

jQuery :

$("#editableContent").mousedown(function(event){
    if(event.which == 3){
        $("#editButton").show();
    }
});

jsFiddle - jQuery

Resources :

onmousedown , .mouseDown() , event.which

Md Ashaduzzaman
  • 4,032
  • 2
  • 18
  • 34
  • I don't understand why you have writen event.which == 3. and how it is related to edit button – user2409128 Nov 17 '14 at 07:28
  • using event.which we can get the pressed key's keyCode which is for right mouse button 3. And when found a pressed key having keyCode 3 just displayed the edit button. – Md Ashaduzzaman Nov 17 '14 at 07:49
0

This answer is based on Making custom right-click context menus for my web-app implemented to work for your situation.

JSFiddle

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();
});
Community
  • 1
  • 1
EternalHour
  • 8,308
  • 6
  • 38
  • 57