jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="container mt-3">
  <div class="row">
    <div class="col-sm-12">
      <table id="albums_minimal" class="table table-striped table-bordered" data-ajax="/api/albums/?format=datatables">
        <thead>
          <tr>
            <th data-data="rank">Rank</th>
            <th data-data="artist_name" data-name="artist.name">Artist</th>
            <th data-data="name">Album name</th>
          </tr>
        </thead>
        <tbody>
          <tr  class="td">
            <td >83%</td>
            <td  class="td">Joyce Muniz</td>
            <td  class="td">Malicia EP</td>
          </tr>
          <tr  class="td">
            <td>96%</td>
            <td>Kiwi</td>
            <td>Rabbit Hole EP</td>
          </tr>
          <tr>
            <td>92%</td>
            <td>Anja Schneider</td>
            <td>All I see EP</td>
          </tr>
          <tr>
            <td>89%</td>
            <td>Bicep</td>
            <td>Just EP</td>
          </tr>
          <tr>
            <td>95%</td>
            <td>Daniel Avery</td>
            <td>Drone Logic</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="context-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

JavaScript

$('.td').on('contextmenu', function(e) {
  
  var top = e.pageY - 10;
  var left = e.pageX - 10;
  
  $("#context-menu").css({
    display: "block",
    top: top,
    left: left
  });
  
  return false;
  
}).on("click", function() {

  $("context-menu").hide();
  
});

$("#context-menu a").on("click", function() {

  $(this).parent().hide();
  
});