<think>我们被要求使用
DOM实现表格隔行变色。表格隔行变色是指让表格的奇数行和偶数行显示不同的背景颜色，以提高可读性。思路：1
.获取表格的所有行（tr元素）。2
.遍历这些行，对偶数索引的行和奇数索引的行分别设置不同的背景颜色。注意：通常我们从0开始计数，所以索引为0,2,4,
...的行是偶数行（实际上的第一行、第三行等），索引为1,3,5,
...的行是奇数行（第二行、第四行等）。但是，有时我们可能希望跳过表头（如果表头有特殊的样式），所以我们可以选择从tbody中获取行，或者根据需求调整。假设我们的表格结构如下：<tableid="myTable"><thead><!--可选--><tr><th>Header1</th><th>Header2</th></tr></thead><tbody><tr><td>Data1</td><td>Data2</td></tr><tr><td>Data3</td><td>Data4</td></tr>
...</tbody></table>我们通常只对tbody中的行进行隔行变色。步骤：1
.获取表格的tbody元素（如果有的话）或者直接获取表格的所有行，然后排除表头。2
.获取tbody中的所有行（tr）。3
.遍历这些行，根据行索引的奇偶性来设置背景色。代码示例（JavaScript）：我们可以使用document
.querySelector或document
.getElementById等方法来获取元素。注意：在实际操作中，我们可能会在页面加载完成后执行这个操作，所以可以将代码放在window
.onload事
件中或者使用
DOMContentLoaded事
件。下面给出一个完整的示例：</think>### 使用
DOM实现表格隔行变色
表格隔行变色（斑马纹效果）通过改变相邻行的背景色提高表格可读性。以下是使用纯JavaScript
DOM操作实现的完整解决方案：
#### 实现原理
1
. **
DOM选择**：获取表格及其所有行元素
2
. **循环遍历**：对每行应用样式
3
. **条
件判断**：根据行索引奇偶性设置不同背景色
4
. **CSS样式**：定义两种不同的背景颜色
#### 完整代码示例
```html
<!DOCTYPE html>
<html>
<head>
<title>表格隔行变色</title>
<style>
/* 基础表格样式 */
table {
border-collapse: collapse;
width:
100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table id="dataTable">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>部门</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>张三</td><td>技术部</td></tr>
<tr><td>2</td><td>李四</td><td>市场部</td></tr>
<tr><td>3</td><td>王五</td><td>财务部</td></tr>
<tr><td>4</td><td>赵六</td><td>人力资源</td></tr>
<tr><td>5</td><td>钱七</td><td>技术部</td></tr>
</tbody>
</table>
<script>
function stripeTable
() {
// 1
. 获取表格和行元素
const table = document
.getElementById
('dataTable'
);
const rows = table
.getElementsByTagName
('tr'
);
// 2
. 遍历所有行（跳过表头）
for
(let i = 1; i < rows
.length; i++
) {
// 3
. 根据行索引设置不同背景色
if
(i % 2 === 0
) {
rows[i]
.style
.backgroundColor = '#f9f9f9'; // 偶数行
} else {
rows[i]
.style
.backgroundColor = '#ffffff'; // 奇数行
}
// 4
. 添加鼠标悬停效果
rows[i]
.add
EventListener
('mouseover', function
() {
this.style
.backgroundColor = '#e6f7ff';
}
);
rows[i]
.add
EventListener
('mouseout', function
() {
// 恢复原始背景色
this.style
.backgroundColor =
(i % 2 === 0
) ? '#f9f9f9' : '#ffffff';
}
);
}
}
// 页面加载完成后执行
window
.onload = stripeTable;
</script>
</body>
</html>
```
#### 关键代码解析
```javascript
// 获取表格行元素
const rows = table
.getElementsByTagName
('tr'
);
// 隔行设置背景色
for
(let i = 1; i < rows
.length; i++
) {
if
(i % 2 === 0
) {
rows[i]
.style
.backgroundColor = '#f9f9f9';
} else {
rows[i]
.style
.backgroundColor = '#ffffff';
}
}
```
#### 效果增强功能
1
. **鼠标悬停高亮**：
```javascript
rows[i]
.add
EventListener
('mouseover', function
() {
this.style
.backgroundColor = '#e6f7ff';
}
);
```
2
. **动态更新**（适用于AJAX加载数据）：
```javascript
function updateTable
() {
// 重新获取数据并更新表格
...
stripeTable
(); // 重新应用隔行变色
}
```
#### 最佳实践建议
1
. **CSS类替代内联样式**：
```css
.even-row { background-color: #f9f9f9; }
.odd-row { background-color: #ffffff; }
.hover-row { background-color: #e6f7ff; }
```
```javascript
// 使用classList添加/移除类
rows[i]
.classList
.add
(i % 2 === 0 ? 'even-row' : 'odd-row'
);
```
2
. **表头排除处理**：
```javascript
// 只处理tbody内的行
const tbodyRows = table
.querySelector
('tbody'
).getElementsByTagName
('tr'
);
```
3
. **现代浏览器优化**：
```javascript
// 使用CSS变量动态控制颜色
document
.documentElement
.style
.setProperty
('--even-color', '#f9f9f9'
);
```
#### 浏览器兼容性
- 支持所有现代浏览器（Chrome, Firefox, Edge, Safari）
- IE9+（需polyfill `classList`）
此实现通过纯
DOM操作实现隔行变色效果，不依赖任何第三方库[^1][^2]。核心原理是遍历表格行并根据索引应用不同样式，同时添加交互效果增强用户体验。
本文探讨了在事件响应函数中this与event.srcElement的不同之处，解释了它们在事件冒泡过程中的作用，并通过一个具体的JavaScript代码示例展示了如何使用this来检查表单输入字段的有效性。
扫一扫
3268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
