jQuery实现隔行换色

最新推荐文章于 2021-08-05 20:52:26 发布

My_____Dream

最新推荐文章于 2021-08-05 20:52:26 发布

阅读量637

点赞数

CC 4.0 BY-SA版权

分类专栏： JQ

本文链接：https://blog.youkuaiyun.com/My_____Dream/article/details/79214936

该博客介绍了如何使用jQuery实现HTML表格的隔行换色功能。通过选择器`:even`和`:odd`，分别设置奇偶行不同的背景颜色，实现了视觉上的区分。示例代码展示了如何在页面加载完成后动态修改表格行的样式。最后，博主提供了联系方式，表示愿意提供技术指导和学习建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery实现隔行换色

一、步骤分析

1、设计页面

2、通过JQ方式获取标签

3、使用选择器进行奇偶数的选择“标签:odd”偶数。"标签:even"奇数。gt（x）大于X

二、实现代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
//$("tr:even").css("background-color","aquamarine");
//$("tr:odd").css("background-color","chartreuse");

$("tr:gt(0),even").css("background-color","aquamarine");
$("tr:odd").css("background-color","chartreuse");
})
</script>
<body ">
<table align="center" border="1" width="300px" height="300px">
<tr >
<th>全选<input id="ch" type="checkbox" onclick="allch(this)"> </th>