在網格 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>