【问题标题】：how to show edit button upon right click on table row如何在右键单击表格行时显示编辑按钮
【发布时间】：2015-01-14 00:17:39
【问题描述】：

是否可以在右击表格行后显示编辑按钮？我想在我的 html 页面中内置此功能，但我不知道如何做到这一点。我的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>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>

当我右键单击此表的行时，它应该显示我可以用来编辑表的编辑按钮。要编辑表格，我有 js 文件，但那是另一回事。我想让编辑按钮在右键单击后可见的主要内容。而且我还使用引导程序来提高可见性。请帮我解决这个问题。

【问题讨论】：

检查这个插件 - github.com/sydcanem/bootstrap-contextmenu

标签： javascript jquery html

【解决方案1】：

此代码可能会对您有所帮助：

右键单击特定的`<tr>`

1) 没有默认浏览器菜单打开

2) 显示/隐藏编辑链接

点击文档（左右）

1) 隐藏编辑链接（可相应更改）

<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>

在这里试试http://jsfiddle.net/f5n9f4po/2/

【讨论】：

我还想要多重编辑。我不能这样做。你能建议怎么做吗？
表示要一次选择多个用户，然后要编辑所有用户的记录..？
是的。基本上我希望如果我正在编辑一行，那么我应该可以通过单击编辑按钮来编辑另一行。
是的，您也可以编辑多条记录。随时欢迎你

【解决方案2】：

这个答案是基于Making custom right-click context menus for my web-app 为适合您的情况而实施的。

JSFiddle

这是 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();
});

【讨论】：

【解决方案3】：

您可以使用 onmousedown 事件来处理它。当您按下鼠标按钮时，该事件将被触发，通过检查它的 keyCode 您可以找到它是否是鼠标右键。

这应该符合你的目的。

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

资源：

onmousedown , .mouseDown() , event.which

【讨论】：

我不明白你为什么要写 event.which == 3. 以及它与编辑按钮的关系
使用event.which我们可以得到按下的键的keyCode，它是用于鼠标右键3的。当找到一个具有keyCode 3的按下的键时，只会显示编辑按钮。

【解决方案4】：

您要捕获的事件是window.oncontextmenu。我很确定您可以通过将事件绑定到tr 标签来将其绑定到右键单击。

(tr selector).oncontextmenu = function () { 
    toggleEditButton() // callback fn for showing your edit button

    return false; // Prevents actual right click menu from showing up
};

请参阅this 了解更多信息。

【讨论】：

右键单击特定的&lt;tr&gt;

点击文档（左右）

右键单击特定的`<tr>`