Как удалить ячейки из таблицы, добавив параметр удаления в контекстное меню в jQuery?

Я хочу добавить контекстное меню правой кнопкой мыши к каждой таблице данных. Я пытаюсь удалить ячейку, но это не так. Это код. Я знаю, что у меня проблема с методом, но я не знаю, как это исправить. Вот мой новый код. Предложения приветствуются.Как удалить ячейки из таблицы, добавив параметр удаления в контекстное меню в jQuery?

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

источник

2016-11-23 Hermione

1. .bind устарела, используйте .он. 2. Зачем использовать переключатель по одному параметру? 3. Пожалуйста, создайте [mcve] – mplungjan

. Я использую переключатель, потому что добавлю другие опции. На данный момент мне нужно только исправить функцию удаления. Проблема с селектором. – Hermione

Вы должны сохранить 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>

источник

2016-11-23 13:16:57 mplungjan

Как удалить ячейки из таблицы, добавив параметр удаления в контекстное меню в jQuery?

ответ

Смежные вопросы