在网格 HTML/CSS/Javascript 中单击单元格时弹出 window

Question

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

感谢您的帮助。

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>