html奇偶行颜色,jquery实现奇偶行不同颜色的方法

jquery实现奇偶行不同颜色的方法

发布时间：2020-12-28 09:12:07

来源：亿速云

阅读：74

作者：小新

这篇文章主要介绍了jquery实现奇偶行不同颜色的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。在jquery中，可以使用“$(":odd")”和“$(":even")”选择器分别选中奇行和偶行的元素，然后使用css()方法分别给奇行和偶行元素设置不同的颜色样式即可实现奇偶行不同颜色。

jquery奇偶行不同颜色的示例html>

Insert a title

$(document).ready(function() {

$("#Table tr:odd").css("background-color", "#e6e6fa");

$("#Table tr:even").css("background-color", "#fff0fa");

});

第一行

第二行

第三行

第四行

效果图：

说明：

jQuery :odd 选择器可以选取每个带有奇数 index 值的元素(比如 1、3、5)。

jQuery :even 选择器可以选取每个带有偶数 index 值的元素(比如 2、4、6)。

其中，index 值从 0 开始，所有第一个元素是偶数 (0)。

感谢你能够认真阅读完这篇文章，希望小编分享的“jquery实现奇偶行不同颜色的方法”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!