js 中表格隔行变色怎么写
时间: 2024-09-14 09:12:11 浏览: 38
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
在JavaScript中,改变HTML表格的隔行颜色通常是在页面加载后动态操作DOM元素来实现的。你可以通过遍历每一行,然后设置其CSS `background-color`属性来达到这个效果。下面是一个基本示例:
```javascript
// 获取表格元素
var table = document.getElementById('your-table-id');
// 获取所有的tr元素(即表格的所有行)
var rows = table.getElementsByTagName('tr');
// 遍历每行
for (var i = 0; i < rows.length; i++) {
// 如果不是第一行(索引从0开始),则设置背景色
if (i % 2 !== 0) { // 或者用 i % 2 == 1 来判断偶数行
rows[i].style.backgroundColor = 'lightgray'; // 更改颜色
} else {
rows[i].style.backgroundColor = ''; // 保持默认或透明
}
}
```
在这个例子中,奇数行会被设置为浅灰色,偶数行保持原样。请注意替换 `'your-table-id'` 为你实际表格的id。
阅读全文