Thiết kế website giá rẻ

Question

I have a problem with the context menu. When I click on any place on the page, the location of the context menu is correct, while when I click on any cell in the table, the context menu is far from the place I clicked. Click on it inside the crescent of the table.

//Html Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="cont.css">
  <!-- <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"> -->

</head>
<body>
  <table id="data-table">
    <thead>
       <tr id="table-header">
          <th data-column="ALARM_DESC" data-order="asc">
             ALARM_DESC
             <div class="resize-handle"></div>
          </th>
          <th data-column="ALARM_NAME" data-order="asc">
             ALARM_NAME
             <div class="resize-handle"></div>
          </th>
          <th data-column="APPLICAITON" data-order="asc">
             APPLICAITON
             <div class="resize-handle"></div>
       </tr>
    </thead>
    <tbody id="table-body">
       <tr class="high-priority" style="">
          <td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
          <td class="ALARM_NAME">utilization w 235421235334</td>
          <td class="APPLICAITON">SiteScope</td>
       </tr>
       <tr class="high-priority" style="">
          <td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
          <td class="ALARM_NAME">utilization w sdfdsf</td>
          <td class="APPLICAITON">SiteScope</td>
       </tr>
       <tr class="high-priority" style="">
          <td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
          <td class="ALARM_NAME">utilization w 235424</td>
          <td class="APPLICAITON">SiteScope</td>

       </tr>
       <tr class="high-priority" style="">
        <td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
        <td class="ALARM_NAME">utilization w sdfdsf</td>
        <td class="APPLICAITON">SiteScope</td>
     </tr>
     <tr class="high-priority" style="">
        <td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
        <td class="ALARM_NAME">utilization w 235424</td>
        <td class="APPLICAITON">SiteScope</td>

     </tr>

    </tbody>
    <!-- <h3>dddffd</h3> -->
 </table>

  <div class="wrapper_contextMenu">
    <div class="content_context">
      <ul class="menu">
        <li class="item">
          <img src="cursor (1).png" style="height: 30px;" alt="">
          <span>Preview</span>
        </li>
        <li class="item">
          <img src="cursor (1).png" style="height: 30px;" alt="">
          <span>Preview</span>
        </li>
        <li class="item">
          <img src="cursor (1).png" style="height: 30px;" alt="">
          <span>Preview</span>
        </li>
        <li class="item share">
          <div>
            <!-- <i class="uil uil-share"></i> -->
            <img src="cursor (1).png" style="height: 30px;" alt="">
            <span>Share</span>
          </div>
          <!-- <i class="uil uil-angle-right"></i> -->
          <ul class="share-menu">
            <li class="item">
              <i class="uil uil-twitter-alt"></i>
              <span>Twitter</span>
            </li>
            <li class="item">
              <i class="uil uil-instagram"></i>
              <span>Instagram</span>
            </li>
            <li class="item">
              <i class="uil uil-dribbble"></i>
              <span>Dribble</span>
            </li>
            <li class="item">
              <i class="uil uil-telegram-alt"></i>
              <span>Telegram</span>
            </li>
          </ul>
        <!-- </li> -->
        <li class="item">
          <img src="cursor (1).png" style="height: 30px;" alt="">
          <span>Get Link</span>
        </li>
        <li class="item">
          <img src="cursor (1).png" style="height: 30px;" alt="">
          <span>Rename</span>
        </li>
        <li class="item">
          <img src="cursor (1).png" style="height: 30px;" alt="">
          <span>Delete</span>
        </li>
      </ul>
      <div class="setting">
        <li class="item">
          <img src="cursor (1).png" style="height: 30px;" alt="">
          <span>Settings</span>
        </li>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="cont.js"></script>
</body>
</html>

// my Css Code

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  background: linear-gradient(135deg, #8B55E9 0%, #5D6BE6 100%)
}

.selected{
  background-color: aqua;
}
.wrapper_contextMenu{
  visibility: hidden;
  position: absolute;
  width: 230px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
.wrapper_contextMenu .menu{
  padding: 10px 12px;
}
.content_context .item{
  list-style: none;
  font-size: 22px;
  height: 35px;
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  border-radius: 5px;
  margin-bottom: 2px;
  padding: 0 5px 0 10px;
}
.content_context .item:hover{
  background: #f2f2f2;
}
.content_context .item span{
  margin-left: 8px;
  font-size: 15px;
}
.content_context .setting{
  display: flex;
  margin-top: -5px;
  padding: 5px 12px;
  border-top: 1px solid #ccc;
}
.content_context .share{
  position: relative;
  justify-content: space-between;
}
.share .share-menu{
  position: absolute;
  background: #fff;
  width: 200px;
  right: -200px;
  top: -35px;
  padding: 13px;
  opacity: 0;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.08);
  transition: 0.2s ease;
}
.share:hover .share-menu{
  opacity: 1;
  pointer-events: auto;
}

//Js Code



$(document).ready(function(){

const contextMenu = $(".wrapper_contextMenu");

$(document).on("contextmenu", function(e) {
  e.preventDefault();
  
  let x = e.offsetX,
      y = e.offsetY,
      winWidth = window.innerWidth,
      winHeight = window.innerHeight,
      cmWidth = contextMenu.width(),
      cmHeight = contextMenu.height();
  


  x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
  y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;

  contextMenu.css({
    left: `${x}px`,
    top: `${y}px`,
    visibility: "visible"
  });
});

$(document).on("click", function() {
  contextMenu.css("visibility", "hidden");
});

$("#data-table").on("click", function(e) {
  if (!e.ctrlKey && $(e.target).prop("tagName") !== "TD") {
    const selectedRows = $("#data-table .selected");
    selectedRows.removeClass("selected");
  }
});

$("#data-table").on("click", "td", function(e) {
  if (e.ctrlKey) {
    const tr = $(e.target).closest("tr");
    tr.addClass("selected");
    console.log(tr);
  }
});

$(document).on("click", function(e) {
  if (!e.ctrlKey && $(e.target).prop("tagName") !== "TD") {
    const selectedRows = $("#data-table .selected");
    selectedRows.removeClass("selected");
  }
});

});

Iam Tried To Edit this Code


const contextMenu = $(".wrapper_contextMenu");

$(document).on("contextmenu", function(e) {
  e.preventDefault();
  
  let x = e.offsetX,
      y = e.offsetY,
      winWidth = window.innerWidth,
      winHeight = window.innerHeight,
      cmWidth = contextMenu.width(),
      cmHeight = contextMenu.height();
  


  x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
  y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;

  contextMenu.css({
    left: `${x}px`,
    top: `${y}px`,
    visibility: "visible"
  });
});

but same reasult

Thiết kế website giá rẻ

Danh mục

Why my Custom Context Menu Position Not Relative to my table