Javascript 如何在表格行上单击鼠标右键时显示“编辑”按钮

右键单击表格的行后，是否可以显示“编辑”按钮？我想在我的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>

参数名
参数值
评论
johnrambo@mail.com
约翰
兰博
编辑
peterparker@mail.com
彼得
帕克
编辑

---

当我用鼠标右键单击此表的行时，它会显示编辑按钮，我可以在其中编辑该表。要编辑表，我有js文件，但那是另一回事。我想让编辑按钮在右键单击后可见的主要内容。我还使用了引导来提高可见性。请帮助我解决此问题。

您要捕获的事件是

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

有关更多信息，请参阅。

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

这应该符合你的目的

HTML:

<div onmousedown="showEditButton(event);">Row Content</div>
<button id="editButton" style="display:none;">Edit</button>

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

资源：

<div onmousedown="showEditButton(event);">Row Content</div>
<button id="editButton" style="display:none;">Edit</button>

function showEditButton(event){
    event = event || window.event;
    if(event.which == 3){
        var button = document.getElementById("editButton");
        button.style.display = 'block';        
    }
}

，，，，

此答案基于您的实际情况

<div onmousedown="showEditButton(event);">Row Content</div>
<button id="editButton" style="display:none;">Edit</button>

function showEditButton(event){
    event = event || window.event;
    if(event.which == 3){
        var button = document.getElementById("editButton");
        button.style.display = 'block';        
    }
}

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

---

此代码可能会帮助您：

右键单击特定的

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

2） 显示/隐藏编辑链接

单击文档（左侧和右侧） 1） 隐藏编辑链接（可相应更改）

.btnEdit{display:none；}
参数名
参数值
评论
johnrambo@mail.com
约翰
兰博
peterparker@mail.com
彼得
帕克
$（文档）.ready（函数（）{
$（'.abc'）.contextmenu（函数（）{
$（'.btnEdit'）.hide（）；
var id=$（this.attr（'id'）；
$（'#'+id+'.btnEdit'）.toggle（）；
返回false；
});
$（文档）。单击（函数（）{
$（'.btnEdit'）.hide（）；
});
});

---

在这里尝试一下

检查这个插件-我不明白你为什么要写event.which==3。以及它与编辑按钮使用事件的关系。我们可以得到被按下的键的键代码，这是鼠标右键3。当我发现一个按键上有3个键时，我只显示了编辑按钮。我还想进行多次编辑。我不能这样做。你能建议怎么做吗？意味着你想一次选择多个用户，然后编辑所有用户的记录..？是的。基本上我想，如果我正在编辑一行，那么我应该可以通过单击编辑按钮编辑另一行。是的，您也可以编辑多个记录。永远欢迎你