Javascript 如何在单击时获取表格单元格的位置

我有一个表，当我在其中单击时，我希望一个模块使用最近的单元格属性显示，以正确对齐模块

<table id="calendar" style = "margin-top: 65px; width: 100%; border-collapse: collapse;">
              <!--<thead>
              <tr>
                  <th>Sun</th>
                  <th>Mon</th>
                  <th>Tue</th>
                  <th>Wed</th>
                  <th>Thu</th>
                  <th>Fri</th>
                  <th>Sat</th>
              </tr>
            </thead>-->

              <tbody id="calendar-body" style = "border: 2px lightgray solid;">

              </tbody>
          </table>

//onclick函数计算模块的放置位置
window.onclick=函数（事件）{
document.getElementById（“模块”）；
module.style.left=event.x；
module.style.top=event.y；
}
//用dom制作桌子
让今天=新日期（）；
让currentMonth=today.getMonth（）；
让currentYear=today.getFullYear（）；
让我们选择year=document.getElementById（“年”）；
让我们选择month=document.getElementById（“月”）；
月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
让monthAndYear=document.getElementById（“monthAndYear”）；
var hello=document.getElementById（“日历”）；
hello.style.height=window.innerHeight-65+“px”；
显示日历（当前月、当前年）；
函数next（）{
currentYear=（currentMonth==11）？currentYear+1：currentYear；
当前月份=（当前月份+1）%12；
显示日历（当前月、当前年）；
}
函数previous（）{
currentYear=（currentMonth==0）？currentYear-1：currentYear；
currentMonth=（currentMonth==0）？11:currentMonth-1；
显示日历（当前月、当前年）；
}
功能显示日历（月、年）{
设firstDay=（新日期（年、月））.getDay（）；
let daysInMonth=32-新日期（年、月、32）.getDate（）；
让tbl=document.getElementById（“日历正文”）；//日历正文
//清除所有以前的单元格
tbl.innerHTML=“”；
//通过DOM在页面中归档关于月份和的数据。
monthAndYear.innerHTML=月[月]+“”+年；
//创建所有单元格
设日期=1；
//创建单个单元格，用数据归档。
var daysInWeek=[“太阳”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”]；
for（设i=0；i<5；i++）{
//创建一个表行
让row=document.createElement（“tr”）；
对于（设j=0；j<7；j++）{
如果（i==0）{
让cell=document.createElement（“td”）；
让celltext=document.createTextNode（daysInWeek[j]）；
设br=document.createElement（“br”）；
cell.appendChild（celltext）；
子细胞（br）；
cell.style.border=“2px实心浅灰色”；
cell.style.color=“灰色”；
如果（j>=第一天）{
让celltext2=document.createTextNode（日期）；
cell.appendChild（celltext2）；
日期++；
}否则{
让celltext2=document.createElement（“br”）；
cell.appendChild（celltext2）；
}
子行（单元格）；
}否则如果（日期>天/月）{
让cell=document.createElement（“td”）；
设cellText=document.createTextNode（“”）；
cell.style.border=“2px浅灰色实体”；
cell.style.color=“灰色”；
cell.appendChild（cellText）；
子行（单元格）；
}否则{
让cell=document.createElement（“td”）；
设cellText=document.createTextNode（日期）；
如果（日期===today.getDate（）&&year==today.getFullYear（）&&month==today.getMonth（））{
cell.style.backgroundColor=“黄色”；
}//给今天的日期涂上颜色
cell.style.border=“2px浅灰色实体”；
cell.style.color=“灰色”；
cell.appendChild（cellText）；
子行（单元格）；
日期++；
}//条件结束语句
}
tbl.追加子项（世界其他地区）；
}//两个fors的结尾
}//今天节目结束
var table=document.getElementById（“日历体”）；

这段代码的问题是，有时模块会出现在屏幕外，为了抵消这一点，我想获得我在表格中单击的位置，然后获取最近单元格的x和y值，以便我可以相应地放置模块

---

我不需要最近单元格的索引，但需要单元格的实际

left

和

top

属性。

尝试使用getBoundingClientRect

---

尝试使用getBoundingClientRect

---

这里没有太多的工作要做，但我想这就是你想要的

document.addEventListener（'click'，函数（e）{
var pos={
上图：e.offsetY，
左：e.offsetX
};
控制台日志（pos）；
});
td{
边框：1px实心；
}

名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
这里没有太多的工作要做，但我想这就是你想要的


document.addEventListener（'click'，函数（e）{
var pos={
上图：e.offsetY，
左：e.offsetX
};
控制台日志（pos）；
});
td{
边框：1px实心；
}

名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
我没有否决这个问题，但可能是因为你没有发布你尝试过的任何东西：请阅读：你能上传这个吗，我现在添加了我的代码，我没有否决这个问题，但可能是因为你没有发布你尝试过的任何东西：请阅读：你能上传这个吗，我现在添加了我的代码，这很有效，但不是在我想要的确切应用程序中，我想要得到您在本作品中单击的最近单元格的左上方，但不是在我想要的确切应用程序中，我想要得到您单击的最近单元格的左上方
//onclick function calculating where to place module
window.onclick = function(event) {
    document.getElementById("module");
    module.style.left = event.x;
    module.style.top = event.y;
}
//made table with dom
  let today = new Date();
  let currentMonth = today.getMonth();
  let currentYear = today.getFullYear();
  let selectYear = document.getElementById("year");
  let selectMonth = document.getElementById("month");

  let months = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

  let monthAndYear = document.getElementById("monthAndYear");
  var hello = document.getElementById("calendar");
  hello.style.height = window.innerHeight - 65 + "px";
  showCalendar(currentMonth, currentYear);


  function next() {
  currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
  currentMonth = (currentMonth + 1) % 12;
  showCalendar(currentMonth, currentYear);
  }

  function previous() {
  currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
  currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
  showCalendar(currentMonth, currentYear);
  }

  function showCalendar(month, year) {

  let firstDay = (new Date(year, month)).getDay();
  let daysInMonth = 32 - new Date(year, month, 32).getDate();

  let tbl = document.getElementById("calendar-body"); // body of the calendar

  // clearing all previous cells
  tbl.innerHTML = "";

  // filing data about month and in the page via DOM.
  monthAndYear.innerHTML = months[month] + " " + year;
  // creating all cells
  let date = 1;

  //creating individual cells, filing them up with data.
  var daysInWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];

  for (let i = 0; i < 5; i++) {
      // creates a table row
      let row = document.createElement("tr");

      for (let j = 0; j < 7; j++) {
        if(i === 0) {

          let cell = document.createElement("td");
          let celltext = document.createTextNode(daysInWeek[j]);
          let br = document.createElement("br");
          cell.appendChild(celltext);
          cell.appendChild(br);
          cell.style.border = "2px solid lightgray";
          cell.style.color = "gray";
          if(j >= firstDay) {
            let celltext2 = document.createTextNode(date);
            cell.appendChild(celltext2);
            date++;
          }else {
            let celltext2 = document.createElement("br");
            cell.appendChild(celltext2);
          }
          row.appendChild(cell);

        }else if (date > daysInMonth) {
            let cell = document.createElement("td");
            let cellText = document.createTextNode("");
            cell.style.border = "2px lightgray solid";
            cell.style.color = "gray";
            cell.appendChild(cellText);
            row.appendChild(cell);
        }else {
            let cell = document.createElement("td");
            let cellText = document.createTextNode(date);
            if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                cell.style.backgroundColor = "yellow";

            } // color today's date
            cell.style.border = "2px lightgray solid";
            cell.style.color = "gray";
            cell.appendChild(cellText);
            row.appendChild(cell);

            date++;

        } //end of condition statements
      }
      tbl.appendChild(row);
  }//end of both fors
}//end of show calendar_today

var table = document.getElementById("calendar-body");


  </script>