首页1.创建一个三行三列的表格（边框粗细为1px，表格内容随意填写），一个按钮，当点击按钮时表格的背景颜色变成绿色。

1.创建一个三行三列的表格（边框粗细为1px，表格内容随意填写），一个按钮，当点击按钮时表格的背景颜色变成绿色。

时间: 2024-03-16 14:46:51 浏览: 51

好的，以下是代码实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格背景色变化</title> <style> table { border-collapse: collapse; border: 1px solid black; } td { border: 1px solid black; padding: 5px; text-align: center; } button { margin-top: 10px; padding: 5px 10px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <button onclick="changeColor()">变成绿色</button> <script> function changeColor() { var table = document.getElementsByTagName("table")[0]; table.style.backgroundColor = "#4CAF50"; } </script> </body> </html> ``` 代码中创建了一个三行三列的表格，并添加了一个按钮。点击按钮时，通过 JavaScript 修改表格的背景颜色为绿色。其中，使用 CSS 设置了表格和表格单元格的样式，使用 JavaScript 的 `getElementsByTagName()` 方法获取表格元素，然后设置其 `backgroundColor` 属性即可。

阅读全文