<!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" 类名,以改变其背景色。