<!DOCTYPE html> <html> <head> <title>隔行换色</title> <style> .row { padding: 10px; } .even { background-color: lightgray; } </style> </head> <body> <table id="myTable"> <tr class="row"> <td>数据1</td> </tr> <tr class="row"> <td>数据2</td> </tr> <tr class="row"> <td>数据3</td> </tr> <!-- 更多数据行... --> </table> <script> const table = document.getElementById('myTable'); const rows = table.querySelectorAll('.row'); for (let i = 0; i < rows.length; i++) { if (i % 2 === 1) { rows[i].classList.add('even'); } } </script> </body> </html>
上述事例使用了一张表格来展示数据，并给每个数据行的 tr 元素添加了类名 "row"。通过 CSS 样式设置了奇数行的背景色为灰色。
在 JavaScript 部分，我们首先通过 getElementById 方法获取到表格元素。然后使用 querySelectorAll 方法选择所有带有 "row" 类名的 tr 元素，在循环中对每个行元素进行判断，如果行索引是奇数，则将其添加 "even" 类名，以改变其背景色。
