首页如何用Javascript完成表格制作，当前鼠标选中表格和其它表格效果有明显区别，最好写出多个实例

如何用Javascript完成表格制作，当前鼠标选中表格和其它表格效果有明显区别，最好写出多个实例

时间: 2024-03-25 07:38:57 浏览: 63

可以使用JavaScript和HTML来创建和操作表格。以下是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <title>Table Example</title> <style> table { border-collapse: collapse; } table, th, td { border: 1px solid black; padding: 5px; } table tr:hover { background-color: yellow; } table tr.selected { background-color: lightblue; } </style> </head> <body> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>30</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>25</td> <td>Female</td> </tr> <tr> <td>Bob</td> <td>40</td> <td>Male</td> </tr> </tbody> </table> <script> let tableRows = document.querySelectorAll("table tr"); tableRows.forEach(function(row) { row.addEventListener("click", function() { tableRows.forEach(function(row) { row.classList.remove("selected"); }); this.classList.add("selected"); }); }); </script> </body> </html> ``` 这个例子创建了一个包含三列的表格，以及一个简单的CSS样式表来添加边框和一些交互效果。当鼠标悬停在表格行上时，该行的背景色变成黄色。当用户单击一行时，该行将突出显示为蓝色。此代码可以通过打开浏览器控制台并粘贴代码来运行。

阅读全文