javascript - 在网格 HTML/CSS/Javascript 中单击单元格时有一个弹出窗口

Question

我很难弄清楚这个问题。当单击 5x8 网格中的单元格时，我需要一个弹出窗口来显示。我需要从弹出窗口中将用户的信息输入到数据库中。我不需要直接的答案，但有没有办法解决这个问题？我对此很陌生。我可以使用任何技术来实现这一点。

感谢您的帮助。

标签： javascripthtmlcss

Answer 1

使用 JavaScript 向所有表格单元格添加事件侦听器，如下所示：

var cells = document.querySelectorAll('td');
cells.forEach((e)=>{
  e.addEventListener("click", ()=>{
    alert("cell clicked!");
  })
})

td{
  border:1px solid;
}

<table>
  <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
  </tr>
  <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
  </tr>
  <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
  </tr>
  <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
  </tr>
  <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
  </tr>
</table>