如何通过在 jQuery 的上下文菜单中添加删除选项来删除 table 中的单元格？

Question

我想在右键单击每个 table 数据时添加上下文菜单。我尝试删除该单元格，但它没有。这是代码。我知道我的方法有问题，但我不知道如何解决。这是我的新代码。欢迎提出建议。

<html>
    <head>
            <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <!-- jQuery source -->

    <style type="text/css">
         .custom-menu {
                display: none;
                z-index: 1000;
                position: absolute;
                overflow: hidden;
                border: 1px solid #CCC;
                white-space: nowrap;
                font-family: sans-serif;
                background: #FFF;
                color: #333;
                border-radius: 5px;
                padding: 0;
            }

            /* Each of the items in the list */
            .custom-menu li {
                padding: 8px 12px;
                cursor: pointer;
                list-style-type: none;
                transition: all .3s ease;
            }

            .custom-menu li:hover {
                background-color: #DEF;
            }

        .bluebox { 
                box-shadow: 2px 2px 2px #888888;
                width: 13px; 
                height: 3px; 
                padding: 0.5em; 
                float: bottom; 
                margin: 1px,1px,1px,1px; 
                background-color: #d3d7f8 ; 

            }

    </style>
    </head>
    <body>
         <ul class='custom-menu'>
          <li data-action="delete">delete</li>
          <li data-action="optionB">OptionB</li>
        </ul>

    <table id= "table1">
        <tr>
        <td class="bluebox">Test1</td>
         <td class="bluebox">Test</td>
          <td class="bluebox">Test</td>
           <td class="bluebox">Test</td>
        </tr>
        <tr>
        <td class="bluebox">Test1</td>
         <td class="bluebox">Test</td>
          <td class="bluebox">Test</td>
           <td class="bluebox">Test</td>
        </tr>
        <tr>
        <td class="bluebox">Test1</td>
         <td class="bluebox">Test</td>
          <td class="bluebox">Test</td>
           <td class="bluebox">Test</td>
        </tr>
    </table>
    <script type="text/javascript">
        $('.bluebox').bind("contextmenu", function(event) {
          event.preventDefault();
          $(".custom-menu").finish().toggle(100).
          css({
            top: event.pageY + "px",
            left: event.pageX + "px"
          });
        });

        $(document).bind("mousedown", function(e) {
          if (!$(e.target).parents(".custom-menu").length > 0) {
            $(".custom-menu").hide(100);
          }
        });

        $(".custom-menu li").click(function() {
          // This is where I have the problem : 
          switch ($(this).attr("data-action")) {
            case "delete":
              $(this).closest('td').remove();
              break;
            case "optionB" : alert("optionB"); break;         }
          $(".custom-menu").hide(100);
        });
    </script>
     </body>
</html>

Answer 1

您需要保存点击的TD：

var $currentTarget;
$(function() {
  $('.bluebox').on("contextmenu", function(event) {
    event.preventDefault();
    $currentTarget = $(this);    
    $(".custom-menu").finish().toggle(100).
    css({
      top: event.pageY + "px",
      left: event.pageX + "px"
    });
  });

  $(document).on("mousedown", function(e) {
    if (!$(e.target).parents(".custom-menu").length > 0) {
      $(".custom-menu").hide(100);
    }
  });

  $(".custom-menu li").click(function() {
    // This is where I have the problem : 
    switch ($(this).attr("data-action")) {
      case "delete":
        $currentTarget.remove();
        break;
      case "optionB":
        alert("optionB");
        break;
    }
    $(".custom-menu").hide(100);
  });
});

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  overflow: hidden;
  border: 1px solid #CCC;
  white-space: nowrap;
  font-family: sans-serif;
  background: #FFF;
  color: #333;
  border-radius: 5px;
  padding: 0;
}
/* Each of the items in the list */

.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
  list-style-type: none;
  transition: all .3s ease;
}
.custom-menu li:hover {
  background-color: #DEF;
}
.bluebox {
  box-shadow: 2px 2px 2px #888888;
  width: 13px;
  height: 3px;
  padding: 0.5em;
  float: bottom;
  margin: 1px, 1px, 1px, 1px;
  background-color: #d3d7f8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class='custom-menu'>
  <li data-action="delete">delete</li>
  <li data-action="optionB">OptionB</li>
</ul>

<table id="table1">
  <tr>
    <td class="bluebox">Test1</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
  </tr>
  <tr>
    <td class="bluebox">Test1</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
  </tr>
  <tr>
    <td class="bluebox">Test1</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
  </tr>
</table>

如何通过在 jQuery 的上下文菜单中添加删除选项来删除 table 中的单元格？

How delete cells from table, by adding a delete option in the context menu in jQuery?

jquery

contextmenu

html-table