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">  {% 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> ``` ######[AI写代码神器 | 432点数解答 | 2024-10-12 16:58:58]

服务商

更多选项

快捷项

自定义