右键单击表格行时如何显示编辑按钮

时间：2014-11-17 06:21:59

标签： javascript jquery html

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

当我右键单击此表的行时，它应该显示我编辑buttin，我可以用来编辑表。编辑表我有js文件，但这是另一回事。主要的是我想在右键单击后使编辑按钮可见。而且我还使用bootstrap来提高可见性。请帮我解决这个问题。enter image description here

4 个答案:

答案 0 :(得分：2)

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

右键单击特定<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/

答案 1 :(得分：1)

您要捕获的事件是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。

答案 2 :(得分：0)

您可以使用 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

答案 3 :(得分：0)

此答案基于为您的情况而实施的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();
});
相关问题
最新问题