酷代码 AI
菜单
服务商

html制作一个10x5表格,现在有一个按钮,当点击按钮的时候,单数行背景颜色为红色,双数行背景颜色为绿色,完整实现代码

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格颜色切换</title> <style> table { border-collapse: collapse; width: 50%; } th, td { border: 1px solid black; padding: 8px; text-align: center; } tr:nth-child(odd) { background-color: red; } tr:nth-child(even) { background-color: green; } </style> </head> <body> <button onclick="changeColor()">点击切换颜色</button> <table> <tbody id="tableBody"> <!-- 生成10行5列的表格 --> {% for i in range(10) %} <tr> {% for j in range(5) %} <td>{{ i * 5 + j }}</td> {% endfor %} </tr> {% endfor %} </tbody> </table> <script> function changeColor() { var tableBody = document.getElementById("tableBody"); var rows = tableBody.getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) { if (i % 2 === 0) { rows[i].style.backgroundColor = "red"; } else { rows[i].style.backgroundColor = "green"; } } } </script> </body> </html> ``` [2024-10-12 16:58:58 | AI写代码神器 | 432点数解答]

相关提问
实用工具查看更多
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]
数独游戏 [娱乐类]
经典推箱子 [娱乐类]
AI摸鱼五子棋 [娱乐类]