JQuery——实现隔行换色

基础页面显示
在这里插入图片描述
页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        table{
            margin: auto;
            width: 200px;
            border: 1px solid;
        }
        th,td{
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
            <td>5</td>
        </tr>
    </table>
</body>
</html>

可以使用过滤选择器中的 :even 和 :odd 来获取奇偶行,并分别设置样式

$("tr:even").css("background-color","orange");
$("tr:odd").css("background-color","pink");

显示效果
在这里插入图片描述
偶数行(索引为0 2 4)的背景色被改为橘色,奇数行(索引为1 3 5)的背景色被改为粉色
由于even和odd选择器是从索引为0开始计算,所以标题行的颜色也受到了影响
如果我们不想更改标题行的颜色,只对数据行的背景色进行更改,可以使用 :gt 选择器来选择索引大于0的 tr 对象

$("tr:gt(0):even").css("background-color","orange");
$("tr:gt(0):odd").css("background-color","pink");

显示效果
在这里插入图片描述
使用 :gt 选择器后,对象集合的索引也发生了相应的变化
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        table{
            margin: auto;
            width: 200px;
            border: 1px solid;
        }
        th,td{
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            $("tr:gt(0):even").css("background-color","orange");
            $("tr:gt(0):odd").css("background-color","pink");
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
            <td>5</td>
        </tr>
    </table>
</body>
</html>

热门文章

暂无图片
编程学习 ·

『杭电1251』统计难题

Problem DescriptionIgnatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀).Input输入数据的第一部分是一张单词表,每行一个单词,单词的长度不超过10,它们代表的是老师…
暂无图片
编程学习 ·

RPM软件包手工编译安装apache

RPM软件包手工编译安装apache1.apache概述2. Apacheweb服务器软件拥有以下特性3. 实验3.1 实验环境3.2在centos7.6的Linux系统下用RPM源码编译安装apache3.2.1 实验步骤 1.apache概述 Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大…
暂无图片
编程学习 ·

01 | 为什么需要消息队列?

1.应用场景见: https://blog.csdn.net/william_n/article/details/1040254082.学习/操作2.1 阅读文档01 | 为什么需要消息队列?李玥 2020-01-1400:0011:24讲述:李玥 大小:10.46M你好,我是李玥。今天我们来讲讲为什么需要消息队列,消息队列主要解决的是什么问题。消息队列…
暂无图片
编程学习 ·

模板字符串

模板字符串是在 JS 中创建字符串的一种新方法。我们可以通过使用反引号使模板字符串化。//ES5 Versionvar greet = Hi I\m Mark;//ES6 Versionlet greet = `Hi Im Mark`;在 ES5 中我们需要使用一些转义字符来达到多行的效果,在模板字符串不需要这么麻烦//ES5 Versionvar lastW…
暂无图片
编程学习 ·

postman引入文件实现参数化及中文乱码问题解决

1、首先,在postman中输入地址和参数,保证接口请求成功。可以在tests中添加断言2、将需要参数化的参数用变量表示,并将变量添加进全局变量中3、将需要参数化的参数写成CSV,TXT,JSON格式的文档。这里用的是csv格式的文件,其中name是变量名如果用txt格式的文件,多参数之间要用…
暂无图片
编程学习 ·

Netty之WebSocket应用

1. 什么是Netty?Netty是一个高性能事件驱动,异步非阻塞的IO Java开源框架,由Jboss提供,用于建立Tcp等底层的链接,基于Netty可以建立高性能的Http服务器,快速开发高性能、高可靠的网络服务器和客户端程序。它支持Http,websocket,tcp,udp等协议。同时Netty又是基于NIO的…
暂无图片
编程学习 ·

华为 openGauss数据库社区 openGauss数据库源代码

2020年7月1日,华为正式宣布开源数据库能力,开放openGauss数据库源代码, 并成立openGauss开源社区, 社区官网(http://opengauss.org)同步上线。关于openGaussopenGauss是一款开源关系型数据库管理系统,采用木兰宽松许可证v2发行。openGauss内核源自PostgreSQL,深度融合华为在…
暂无图片
编程学习 ·

整理得吐血了,二叉树、红黑树、B&B+树超齐全,快速搞定数据结构

前言没有必要过度关注本文中二叉树的增删改导致的结构改变,规则操作什么的了解一下就好,看不下去就跳过,本文过多的XX树操作图片纯粹是为了作为规则记录,该文章主要目的是增强下个人对各种常用XX树的设计及缘由的了解,也从中了解到常用的实现案例使用XX树实现的原因。数据…
暂无图片
编程学习 ·

测试

java创建指定大小文件@TOC 软件功能测试中经常遇到上传文件大小校验功能,我们需要构造多种情况用于边界测试,因此需要创建不同大小的文件。 java中使用RandomAccessFile类可快速创建,代码如下: package com.study.demo;import java.io.*;public class CreaterFile {public …
暂无图片
编程学习 ·

王道2-2-24

题目大意 给定一个链表,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始)。 如果 pos 是 -1,则在该链表中没有环。 说明:不允许修改给定的链表。 。 思路快慢两个指…
暂无图片
编程学习 ·

阿里云云计算ACA练习题5

如果将跨阿里云账号的ECS自建数据库迁移至云数据库RDS,以下哪一项不是必须配置的信息? A. 目标RDS实例IDB. RDS实例访问账号C. RDS实例IP地址D. RDS实例访问账号对应的密码【参考答案】:B云计算面临的主要安全威胁,按照对系统的影响维度可以分为?(正确答案的数量:3) (多选…
暂无图片
编程学习 ·

关于时钟偏差(Clock Skew)和时钟抖动(Clock Jitter)

时钟偏差(Clock Skew)对于T:如果对于①处采样的一个输入IN,第二个时钟周期在④处采样,一定程度改善了电路对于Thold:对于①处采样的一个输入IN,第二个时钟周期在④处采样,如果3处的采样在④就输出了,那么就会得到错误的结果,④处本应该得到①处的数据对于另一种情况:…
暂无图片
编程学习 ·

Vue + Alioss前端上传图片

Vue + Alioss前端上传图片准备工作安装依赖js工具类封装使用end 准备工作 需要注册一个ali云申请accesskeys,具体的操作请参考 link. 安装依赖 npm install ali-ossjs工具类封装 let OSS=require(ali-oss);let client=new OSS({accessKeyId: 你创建的Bucket时获取的accessKey…
暂无图片
编程学习 ·

从word中复制内容包含图片到百度ueditor编辑器中

1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java。前端为Jsp(前端都一样,后台如果语言不通得自己做 Base64编码解码)因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。例如www.wangEdi…
暂无图片
编程学习 ·

2020抖音小店入驻流程

原文链接:https://blog.ccswust.org/15574.html一、访问入驻后台使用电脑浏览器打开网址https://sso.douyin.com/login/?service=https://fxg.jinritemai.com/index.html#/home,选择【抖音号登陆】,【重要,一定要登录自己的抖音号,才能把店铺和抖音号绑定在一起】※建议请…
暂无图片
编程学习 ·

liunx-搭建hadoop(2.7.1)和使用

1.搭建 1.集群jdk安装 配置JDK环境变量在局域网中关闭防火墙 service iptables stop设置主机映射 1. 打开配置文件vim /etc/hosts 2. 内容192.168.80.111 server1192.168.80.112 server2192.168.80.110 server3配置SSH免密登录 1. 生成私钥ssh-keygen -t dsa -P -f ~/.ssh/id_…
暂无图片
编程学习 ·

国际机器人赛事RoboCup@Home Education2020线上比赛成功举办

2020年6月27-28日,国际权威机器人赛事RoboCup@Home Education于线上举行,此赛事是RoboCup@Home的一项教育计划,旨在鼓励学校参与到以人工智能为中心的服务机器人开发,该比赛每年与RoboCup@Home同时进行,参考同一套比赛规则和评分标准,同时加入大量的教学培训和技术交流,…
暂无图片
编程学习 ·

4G无线监控系统在矿山供水中的应用

4G无线监控系统在矿山供水中的应用 文章摘要 针对内蒙古某矿业目前供水系统的现状,设计了基于4G和PLC的无线供水监控系统。系统中包括上位机监控、无线通信和下位机数据采集及控制部分。实践证明,该系统实现简单,通讯可靠,而且具有很好的扩展性。 前言 水资源是人类赖以生存和发…
暂无图片
编程学习 ·

CSS的个人见解

CSS总结 CSS是什么?css是层叠样式表(英文全称:2113Cascading Style Sheets)是一种5261用来表现HTML(标准通用4102标记语言的一个应用)或1653XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS的作用 css的作用 • 1.实现了样式和html的代码分离。 • 2.弥补…