Question

动态创建的表，我想在点击表的tr时添加上下文菜单。调用上下文事件的代码工作正常，但我不知道如何制作上下文菜单及其项目。表的代码是：

function setItemForSale(itemForSale, type, xml)
{
  var itemForSaleTable = document.getElementById("custorder1");
  var itemForSaleTableHead = document.getElementById("head1");
  var itemForSaleTableBody = document.createElement("tbody");

  itemForSaleTableBody.appendChild(itemForSaleTableHead);

  $('#custorder1 tr').has('td').remove(); // Code for clearing table body

  for (var i = 0; i < itemForSale.length; i++)
  {
      var row = document.createElement("tr");

      if (row.addEventListener)
      {
          row.addEventListener('contextmenu', function (e)
          {
              $(this).addClass('selected').siblings().removeClass('selected');
              zitemNo = $(this).find('td:first').text();
              z1Pkg = $(this).find('td:nth-child(8)').text();

              e.preventDefault();

          }, false);
      }
      else
      {
          row.attachEvent('oncontextmenu', function ()
          {
              alert("You've tried to open context menu");
              window.event.returnValue = false;
          });
      }

      var obj = itemForSale[i];
      var vitemno = obj["itemNo"];
      var vname = obj["name"];
      var valias = obj["alias"];
      var vbrand = obj["brand"];

      var cell = document.createElement("td");
      var cellText = document.createTextNode(vitemno);
      cell.appendChild(cellText);
      row.appendChild(cell);

      cell = document.createElement("td");
      cellText = document.createTextNode(vname);
      cell.appendChild(cellText);
      row.appendChild(cell);

      cell = document.createElement("td");
      cellText = document.createTextNode(valias);
      cell.appendChild(cellText);
      row.appendChild(cell);

      cell = document.createElement("td");
      cellText = document.createTextNode(vbrand);
      cell.appendChild(cellText);
      row.appendChild(cell);

      itemForSaleTableBody.appendChild(row);
  }
  itemForSaleTable.appendChild(itemForSaleTableBody);
  itemForSaleTable.setAttribute("border", "2");
}

我想创建一个带有“Add”标签的上下文菜单，以便在单击add时调用一个函数。请帮助。

Answer 1

这是一个描述你想要做什么的教程： http://www.sitepoint.com/building-custom-right-click-context-menu-javascript/

为了使其成为一个真正的答案，我将描述这个过程并提供一些代码。

您已经在每一行添加了一个事件，很棒，您需要了解的是上下文菜单是页面上的常规元素，就像任何其他元素一样，您需要定义它。

所以这是一个虚拟的上下文菜单元素：

<div id="context-menu">
</div>

要向其添加元素，您只需要编写（或使用javascript执行）

<div id="context-menu">
    <div id="context-menu-item-add" class="context-menu-item">
    </div>
</div>

现在你有了上下文菜单元素，你需要在你的CSS中隐藏它并使其位置绝对，以便它可以在页面的任何地方显示

#context-menu { position:absolute; display: none; }

现在在这段代码中，您可以执行类似

的操作

    row.addEventListener('contextmenu', function(e) 
                    {
                                $(this).addClass('selected').siblings().removeClass('selected');
                                zitemNo = $(this).find('td:first').text();
                                z1Pkg = $(this).find('td:nth-child(8)').text();

                                var contextMenu = document.getElementById("context-menu");

                                /* get actual mouse position */
                                var pageX = e.pageX;
                                var pageY = e.pageY;
                                if (pageX === undefined) 
                                {
                                    pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                                    pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                                }

                                /* im pretty sure you need to add "px", i dont rememeber sorry */
                                contextMenu.style.display = "block";
                                contextMenu.style.top = [pageY, "px"].join("");
                                contextMenu.style.left = [pageX, "px"].join("");

                                /* i recommend returing false instead of preventing default */
                                return false;

                        }, false);

此代码仅显示点击位置的上下文菜单，您还需要考虑边缘，但我会让您自己解决这个问题。

您还需要为上下文菜单的每个项添加事件侦听器。

document.getElementById("context-menu-item-add").addEventListener("click", /* what to do on item click */)

最后一步是在用户按下上下文菜单项或在其他任何地方点击后“关闭”上下文菜单，所以我建议在整个表上添加一个事件，或者在整个文档中添加事件，并在每个上下文菜单监听器。

编辑：

顺便说一下，如果你要标记jQuery，请实际使用jQuery，它确实简化了制作上下文菜单的过程，因为它已经将pageX和pageY内置到其事件中。

点击表格tr（动态）添加上下文菜单

1 个答案: