jquery隔行变色
时间: 2024-06-30 18:00:30 浏览: 7
jQuery 是一个流行的 JavaScript 框架,用于简化 HTML 文档遍历、事件处理、动画和 AJAX 功能等。要实现表格(通常是 `<table>`)隔行变色,你可以使用 jQuery 的 `each()` 方法结合 CSS 类选择器。以下是一个简单的示例:
```javascript
$(document).ready(function() {
// 获取所有的 table 行
var rows = $("table tr");
// 遍历每一行
rows.each(function(index) {
// 如果索引是偶数(即行号为2的倍数),给它添加一个类,如"even-row"
if (index % 2 == 0) {
$(this).addClass("even-row");
}
// 如果索引是奇数,给它添加另一个类,如"odd-row"
else {
$(this).addClass("odd-row");
}
});
});
```
然后,在你的 CSS 中定义 `.even-row` 和 `.odd-row` 类的背景颜色:
```css
.even-row {
background-color: #f2f2f2; /* 偶数行背景色 */
}
.odd-row {
background-color: #ffffff; /* 奇数行背景色 */
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)