隔行换色总结
功能效果展示:
第一种思路:
使用数组,将数组的内容渲染到页面上,序号也就是将数组的下标输出到第一个td上,将数组的内容输出到第二个td上,(使用``拼接字符串)
具体操作:
1.HTML 结构搭建
- 首先,让我们来看一下 HTML 代码。我们创建了一个基本的表格结构,<table>标签定义了整个表格,cellspacing="0"属性用于消除表格单元格之间的间距。
- <thead>标签内包含了表格的头部信息,这里有一行<tr>,其中三个<th>标签分别定义了 “序号”“内容”“操作” 三个表头。
- <tbody>标签则是表格主体内容的容器,初始时,我们预留了它作为动态生成表格行的区域,注释掉了一个示例的<tr>行,这行只是为了展示结构,实际运行时将由 JavaScript 动态生成。
- 最后,还有一个<button>按钮,其类名为add,并绑定了一个点击事件οnclick="addData()",用于触发添加数据行的操作。
html:
<table cellspacing="0"><thead><tr><th>序号</th><th>内容</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1</td><td>data</td><td><button class="del">删除</button></td></tr> --></tbody></table><button class="add" onclick="addData()">添加行</button>
css:
2.CSS 样式美化
- 为了让表格看起来更加美观和易于阅读,我们添加了一些 CSS 样式。
- *选择器用于清除所有元素的默认内外边距,确保表格布局的一致性。
- table选择器虽然目前只注释掉了设置边框的代码,但为后续可能的整体表格样式调整预留了空间。
- th选择器为表头单元格设置了内边距和较粗的边框,使其更加醒目。
- td选择器为普通单元格设置了适当的内边距和较细的边框,区分表头与内容单元格的视觉效果。
<style>* {margin: 0;padding: 0;}table {/* border: black 2px solid; */}th {padding: 5px 20px 5px 20px;border: 2px solid black;}td {padding: 5px 20px 5px 20px;border: 1px solid black;}</style>
js:
3.JavaScript 功能实现
- 初始化变量:
- 我们定义了一个数组arr,并初始化为[100],这个数组将用于存储表格中的数据。
- 获取页面中的<tbody>元素,并赋值给变量body,后续将通过它来操作表格主体内容。
- 获取类名为add的按钮元素,并赋值给变量add
- 表格渲染函数apply:
- apply函数负责将数组中的数据渲染到表格中。它首先初始化一个空字符串str,用于存储生成的 HTML 代码片段。
- 通过for循环遍历数组arr,在每次循环中,使用模板字符串生成一个<tr>行的 HTML 代码。这里利用三元运算符${i%2!==0?'style="background-color: aqua;"':''}根据i的奇偶性为<tr>行设置不同的背景颜色,奇数行背景色为aqua,偶数行保持默认。
- 然后将当前行的序号i + 1、数组中的数据arr[i]以及一个带有删除功能的<button>按钮(点击时调用delData(${i})函数)分别插入到对应的<td>元素中。
- 循环结束后,将生成的完整 HTML 字符串str赋值给body.innerHTML,从而实现表格的渲染。
- 添加数据函数addData:
- addData函数用于实现添加数据行的功能。它首先将变量num的值增加 100,这里的num用于生成新的数据值。
- 然后将新生成的num值通过arr.push(num)方法添加到数组arr中,并在控制台打印数组arr,方便查看数据更新情况。
- 最后调用apply函数,重新渲染表格,使新添加的数据能够及时显示在页面上。
- 删除数据函数delData:
- delData函数接收一个参数index,该参数表示要删除的数据在数组中的索引。
- 它通过arr.splice(index, 1)方法从数组arr中移除指定索引位置的数据。
- 同样调用apply函数,重新渲染表格,实现删除数据行后页面的实时更新。
let arr = [100];let body = document.getElementsByTagName('tbody')[0];let add = document.getElementsByClassName('add')[0];console.log(add);function apply() {let str = "";for (i = 0; i < arr.length; i++) {str +=`<tr ${i%2!==0?'style="background-color: aqua;"':''}><td>${i+1}</td><td>${arr[i]}</td><td><button class="del" onclick="delData(${i})">删除</button></td></tr>`;}body.innerHTML = str;}apply();let num = 100;// 添加函数function addData() {num += 100;console.log(num);arr.push(num);console.log(arr);apply();}// 删除function delData(index){arr.splice(index,1);apply();}
以上是第一种思路:
第二种思路中,html和css是一致的,所以我们就只讲js中的具体操作。
dataNum
:初始值为 100,用于为新添加的行提供数据。
// 添加函数function addData() {let tr = document.createElement('tr');let tdNum = document.createElement('td');let tdData = document.createElement('td');let tdDel = document.createElement('td');// let num = document.createTextNode();let data = document.createTextNode(dataNum);let delText = document.createTextNode("删除");let del = document.createElement('button');del.appendChild(delText);tdDel.appendChild(del);// tdNum.appendChild(num);tdData.appendChild(data);tr.appendChild(tdNum);tr.appendChild(tdData);tr.appendChild(tdDel);console.log(tr);body.appendChild(tr);dataNum += 100;rowColor();numOrder();}// 序号函数function numOrder() {let trNum = body.children;console.log(trNum);for (i = 0; i < trNum.length; i++) {console.log(i);trNum[i].children[0].innerHTML = i+1;}rowColor();}// 颜色函数function rowColor() {let trNum = body.children;for (i = 0; i < trNum.length; i++) {if (i % 2 !== 0) {console.log(document.getElementsByTagName('tr')[i]);document.getElementsByTagName('tr')[i+1].style.backgroundColor = "red";}else{document.getElementsByTagName('tr')[i+1].style.backgroundColor = "white";}}}// 删除函数body.addEventListener('click', function(e) {console.log(e.target.innerText);if (e.target.innerText == "删除") {body.removeChild(e.target.parentElement.parentElement);}rowColor();numOrder();})
-
添加函数
addData
:- 创建一个新的表格行
tr
以及三个单元格tdNum
、tdData
和tdDel
。 - 创建文本节点
data
和delText
,分别表示数据和 “删除” 按钮的文本。 - 创建 “删除” 按钮
del
,并将delText
添加到按钮中。 - 将
data
添加到tdData
中,将del
添加到tdDel
中。 - 将三个单元格添加到
tr
中,并将tr
添加到表体body
中。 dataNum
增加 100,以便下次添加行时使用新的数据。- 调用
rowColor
和numOrder
函数,更新表格的颜色和序号。
- 创建一个新的表格行
-
序号函数
numOrder
:- 获取表体中的所有行
trNum
。 - 遍历这些行,为每行的第一个单元格设置序号,序号从 1 开始。
- 调用
rowColor
函数,更新表格的颜色。
- 获取表体中的所有行
-
颜色函数
rowColor
:- 获取表体中的所有行
trNum
。 - 遍历这些行,根据行的索引奇偶性设置不同的背景颜色,奇数行为红色,偶数行为白色。
- 获取表体中的所有行
-
删除函数:
- 为表体添加点击事件监听器。
- 当点击的元素文本为 “删除” 时,删除对应的行。
- 调用
rowColor
和numOrder
函数,更新表格的颜色和序号。
相关文章:
隔行换色总结
功能效果展示: 第一种思路: 使用数组,将数组的内容渲染到页面上,序号也就是将数组的下标输出到第一个td上,将数组的内容输出到第二个td上,(使用拼接字符串) 具体操作: …...
【kind管理脚本-2】脚本使用说明文档 —— 便捷使用 kind 创建、删除、管理集群脚本
当然可以,以下是为你这份 Kind 管理脚本写的一份使用说明文档,可作为 README.md 或内部文档使用: 🚀 Kind 管理脚本说明文档 本脚本是一个便捷的工具,帮助你快速创建、管理和诊断基于 Kind (Kubernetes IN Docker) 的…...
Python星球日记 - 第13天:封装、继承与多态
🌟引言: 上一篇:Python星球日记 - 第12天:面向对象编程(OOP)基础 名人说:不要人夸颜色好,只留清气满乾坤(王冕《墨梅》) 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 一、引言二、封装的概念与实现1. 公有属性与私有属性2. 使用getter和sett…...
基于AT89C52单片机的GSM上报智能家居报警温度烟雾防盗系统
点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/90579530?spm1001.2014.3001.5503 功能介绍: 1、功能:具有温度、烟雾、入侵报警功能,采用LCD1602液晶显示屏实时显示温度值与…...
北重数控滑台厂家:机器人地轨究竟是如何运作的,又在哪些领域发光发热呢?
机器人地轨是指利用机器人技术在地面上移动或执行任务的轨道系统。这种系统通常包括导轨、传动装置、传感器和控制系统等组成部分。机器人地轨的运作原理是通过控制传动装置沿着导轨移动,同时利用传感器获取周围环境信息并通过控制系统进行实时调节。 机器人地轨在…...
2025最新系统 Git 教程(三)
2.3 Git 基础 - 查看提交历史 查看提交历史 在提交了若干更新,又或者克隆了某个项目之后,你也许想回顾下提交历史。 完成这个任务最简单而又有效的工具是 git log 命令。 我们使用一个非常简单的 simplegit 项目作为示例。 运行下面的命令获取该项目&…...
显示器各类异常处理方法
显示器各类异常处理方法 导航 文章目录 显示器各类异常处理方法导航画面无显示/黑屏/无HDMI信号输入显示器闪烁显示器花屏显示画面模糊或扭曲显示器颜色异常显示器出现死点或亮点 画面无显示/黑屏/无HDMI信号输入 首先应该检查的是显示器电源(真的有人弄掉电源…...
Error 1062 (23000): Duplicate entry ‘‘ for key ‘id‘`
目录 Error 1062 (23000): Duplicate entry for key id1. **问题分析**2. **解决方法****步骤 1:检查 id 字段的值****步骤 2:检查表结构****步骤 3:检查现有数据****步骤 4:检查插入逻辑****步骤 5:修改表结构&#…...
谈谈模板方法模式,模板方法模式的应用场景是什么?
一、模式核心理解 模板方法模式是一种行为设计模式,通过定义算法骨架并允许子类重写特定步骤来实现代码复用。 如同建筑图纸规定房屋结构,具体装修由业主决定,该模式适用于固定流程中需要灵活扩展的场景。 // 基础请求处理…...
未来蓉城:科技与生态共舞的诗意栖居-成都
故事背景 故事发生在中国四川成都的2075年,展现科技与自然深度交融的未来城市图景。通过六个充满想象力的生态装置场景,描绘市民在智慧城市中诗意栖居的生活状态,展现环境保护与人文传承的和谐共生。 故事内容 在电子竹林轻轨站,通…...
模仿axios的封装效果来封装fetch,实现baseurl超时等
因为要在cocos游戏项目里面发送网络请求获取数据,并且还有可能用到websocket发送请求,所以这里封装一个fetch放便使用: // fetch封装// 基础配置 const BASE_URL 你的url const TIMEOUT 5000// 请求封装 const http async (url: string, …...
Linux(CentOS10) gcc编译
本例子摘自《鸟哥的linux私房菜-基础学习第四版》 21.3 用make进行宏编译 书中的代码在本机器(版本见下)编译出错,改正代码后发布此文章: #kernel version: rootlocalhost:~/testmake# uname -a Linux localhost 6.12.0-65.el10.x86_64 #1…...
Design Compiler:语法检查工具dcprocheck
相关阅读 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 dcprocheck是一个在Design Compiler存在于安装目录下的程序(其实它是一个指向snps_shell的符号链接,但snps_shell可以根据启动命令名判…...
根据日期格式化的常见规则和标准
根据日期格式化的常见规则和标准,2025年1月9日17:00可以正常格式化。具体分析如下: 1. 日期合法性验证 日期2025年1月9日不存在逻辑错误(如2月30日等非法日期),且时间17:00(24小时制)符合规范…...
macOS Chrome - 打开开发者工具,设置 Local storage
文章目录 macOS Chrome - 打开开发者工具设置 Local storage macOS Chrome - 打开开发者工具 方式2:右键点击网页,选择 检查 设置 Local storage 选择要设置的 url,显示右侧面板 双击面板,输入要添加的内容 2025-04-08ÿ…...
idea 的 WEB-INF 下没有 classes 编译文件,如何添加?
idea 打开项目却没有在 WEB-INF 下找到 classes 编译文件 添加流程如下: 1、选中 File ->Project Structure 后右击 2、选中 Modules ->选中项目 ->点击 Paths ->修改 output path为:项目绝对路径\WebRoot\WEB-INF\classes 3、修改完成后&…...
EasyExcel结合多线程+控制sheet页全量导出
业务分析 内部平台需要一个导出mysql数据到excel的方法,所以使用了EasyExcel 因为EasyExcel的sheet页是放到一个List里面的,如果把百万量级的数据放到sheet页中全量写入会有OOM风险,所以最终选择的方案是分sheet页写入 同时因为该平台是多…...
【学习笔记】RL4LLM
字数溢出,分了一半出来 上半段:LLMRL 文章目录 8 [RL4LLM] 理解 reasoning model Tokenizer 的 chat template,vllm inferencetokenizerchat templatedistill tokenizerqwen tokenizer apply chat templatevllm inference 9 [RL4LLM] PPO wo…...
在Windows搭建gRPC C++开发环境
一、环境构建 1. CMake Download CMake 2. Git Git for Windows 3. gRPC源码 git clone --recurse-submodules -b v1.67.1 --depth 1 --shallow-submodules https://github.com/grpc/grpc grpc-1.67.1二、使用CMake生成工程文件 mkdir cmake_build cd cmake_build cmake…...
NO.76十六届蓝桥杯备战|数据结构-单调栈|发射站|Largest Rectangle in a Histogram(C++)
什么是单调栈? 单调栈,顾名思义,就是具有单调性的栈。它依旧是⼀个栈结构,只不过⾥⾯存储的数据是递增或者递减的。这种结构是很容易实现的(如下⾯的代码),但重点是维护⼀个单调栈的意义是什么 …...
消息队列(Message Queue)简介
消息队列是一种进程间通信(IPC)机制,允许不同进程通过发送和接收消息进行 异步通信。它的核心特点包括: 解耦:消息队列解耦了生产者和消费者,简化了系统设计。 持久化存储:支持将消息存储在队列…...
动/静态库
1.先了解一下动静态库 上图可以看出来静态库就是由一堆进过链接阶段的.o文件组成的.a文件。在这里必须要强调的是库文件格式一定是libxxx.a/so在你进行路径查找使用的时候要去掉lib和后缀使用! 静态库 概念:在程序编译链接阶段,其代码被完整…...
KWDB创作者计划—边缘计算:从概念到落地的技术解读
引言 随着物联网(IoT)和人工智能(AI)的快速发展,数据量呈爆炸式增长,传统的云计算架构逐渐暴露出延迟高、带宽占用大等问题。边缘计算作为一种新兴的分布式计算范式,正在改变数据处理的方式。本…...
ubuntu根文件系统通过uMTP-Responder实现usb的MTP功能
实现mtp设备 添加服务 /home/flynn/firfly_rootfs/lib/systemd/system/adbd.service #start [Unit] Description Adbd for linux Beforerockchip.service[Service] Typeforking ExecStart/etc/init.d/adbd.sh start ExecStop/etc/init.d/adbd.sh stop ExecReload/etc/init.d…...
8、nRF52xx蓝牙学习(boards.h文件学习)
boards.h文件的代码如下: #ifndef BOARDS_H #define BOARDS_H#include "nrf_gpio.h" #include "nordic_common.h"#if defined(BOARD_NRF6310)#include "nrf6310.h" #elif defined(BOARD_PCA10000)#include "pca10000.h" #…...
辛格迪客户案例 | 河南宏途食品实施电子合约系统(eSign)
01 河南宏途食品有限公司:食品行业的数字化践行者 河南宏途食品有限公司(以下简称“宏途食品”)作为国内食品行业的创新企业,专注于各类食品的研发、生产和销售。公司秉承“质量为先、创新驱动、服务至上”的核心价值观ÿ…...
webrtc-stats
1. RTP 相关统计 1.1 inbound-rtp (接收端统计) 接收到的 RTP 流统计信息,包含以下关键指标: bytesReceived: 接收到的字节总数packetsReceived: 接收到的数据包总数packetsLost: 丢失的数据包数量jitter: 数据包到达时间的抖动(毫秒&…...
【LangChain框架组成】 LangChain 技术栈的模块化架构解析
目录 整体架构概述 整体架构层级划分 模块详细解析 1. 部署与服务层(LangServe & Deployments) 2. 应用模板层(Templates & Committee Architectures) 3. 核心功能层(LangChain) 4. 社区扩展…...
RNN、LSTM、GRU汇总
RNN、LSTM、GRU汇总 0、论文汇总1.RNN论文2、LSTM论文3、GRU4、其他汇总 1、发展史2、配置和架构1.配置2.架构 3、基本结构1.神经元2.RNN1. **RNN和前馈网络区别:**2. 计算公式:3. **梯度消失:**4. **RNN类型**:(查看发展史)5. **…...
用TypeScript和got库编写爬虫程序指南
用TypeScript和got库写一个爬虫程序。首先,我得确认他们对TypeScript和Node.js的基础了解,可能他们已经有了一些JS的经验,但不确定。接下来,需要明确爬虫的目标,比如要爬取的网站、需要的数据类型以及处理方式。 首先…...
使用 Spring Boot 快速构建企业微信 JS-SDK 权限签名后端服务
使用 Spring Boot 快速构建企业微信 JS-SDK 权限签名后端服务 本篇文章将介绍如何使用 Spring Boot 快速构建一个用于支持企业微信 JS-SDK 权限校验的后端接口,并提供一个简单的 HTML 页面进行功能测试。适用于需要在企业微信网页端使用扫一扫、定位、录音等接口的…...
【软考-架构】13.2、软件层次风格
✨资料&文章更新✨ GitHub地址:https://github.com/tyronczt/system_architect 文章目录 2、层次架构风格两层C/S架构三层C/S架构三层B/S架构富互联网应用RIAMVC架构MVP架构MVVM架构 ✨3、面向服务的架构风格SOASOA中应用的关键技术WEB Service企业服务总线ESB …...
Java 进阶-全面解析
目录 异常处理 集合框架 List 集合 Set 集合 Map 集合 文件与字符集 IO 流 多线程 通过继承Thread类创建线程 通过实现Runnable接口创建线程 线程同步示例 线程通信示例 网络编程 Java 高级技术 反射机制 动态代理 注解 异常处理 在 Java …...
mongodb 创建keyfile
在 MongoDB 中,keyFile 是用于副本集成员间内部认证的密钥文件。它是一个包含随机字符串的文件,所有副本集成员必须使用相同的 keyFile 进行通信。以下是创建和配置 keyFile 的详细步骤。 创建 KeyFile 的步骤 1. 生成随机字符串 使用以下命令生成一个…...
工业4.0时代,RK3562工控机为何成为智慧工位首选?
在制造业数字化转型的浪潮中,智慧车间已成为提升生产效率、降低运营成本的关键战场。作为智慧车间的"神经末梢",工位机的智能化程度直接影响着整个生产线的运行效率。RK3562工控机凭借其强大的计算性能、稳定的运行表现和丰富的接口配置&#…...
WPF 资源加载问题:真是 XAML 的锅吗?
你的观察很敏锐!确实,在 WPF 项目中,.cs 文件主要负责逻辑实现,而资源加载的问题通常跟 XAML(以及它背后的 .csproj 配置)关系更大。我会围绕这个观点,用 CSDN 博客风格详细解释一下 .cs、XAML …...
5. 深度剖析:Spring AI项目架构与分层体系全解读
1、前言 前面我们已经可以通过简单的方式集成Spring AI进行快速开发了。授人以鱼不如授人以渔,我们还是需要了解Spring AI的项目结构,以及他的一些核心概念。 2、项目结构 我们将Spring AI代码直接fork到我们自己的仓库中。fork的目的是方便我们为了学…...
2025最新数字化转型国家标准《数字化转型管理参考架构》 正式发布
当前,数字化转型是数字时代企业生存和发展的必答题,其根本任务是价值体系优化、创新和重构。数字生产力的飞速发展不仅引发了生产方式的转变,也深刻改变了企业的业务体系和价值模式。 为进一步引导企业明确数字化转型的主要任务和关键着力点…...
蓝桥杯备赛 Day 20 树基础
![[树的基础概念.png]] 树的遍历 二叉树遍历分类 DFS前序遍历 根节点-左儿子-右儿子 DFS中序遍历 左儿子-根节点-右儿子 DFS后序遍历 左儿子-右儿子-根节点 BFS层序遍历![[树的遍历.png]] 代码: #include <bits/stdc.h>using namespace std; const int N20; i…...
清晰易懂的Jfrog Artifactory 安装与核心使用教程
JFrog Artifactory 是企业级二进制仓库管理工具,支持 Maven、Docker、npm 等 30 包格式。本教程将手把手教你完成 安装、配置、核心操作,并指出企业级部署的避坑要点,助你快速搭建私有仓库! 一、安装 JFrog Artifactory࿰…...
苍穹外卖总结
苍穹外卖学习知识点 整体概括: 学到目前(day10),总体最核心的部分就是CURD各种数据,因为一些接口,前端页面都已经设计好,在实际开发中也应该是这样,重点是在每个不同的业务板块区别出细微不同的业务逻辑 Swagger注解 swagger是一种自动生成接口文档的插件 使用注解,就可以…...
python学智能算法(九)|决策树深入理解
【1】引言 前序学习进程中,初步理解了决策树的各个组成部分,此时将对决策树做整体解读,以期实现深入理解。 各个部分的解读文章链接为: python学智能算法(八)|决策树-CSDN博客 【2】代码 【2.1】完整代…...
HTTP代理:内容分发战场上的「隐形指挥官」
目录 一、技术本质:流量博弈中的「规则改写者」 二、战略价值:内容分发的「四维升级」 三、实战案例:代理技术的「降维打击」 四、未来进化:代理技术的「认知升级」 五、结语:代理技术的「战略觉醒」 在数字内容爆…...
学习笔记(C++篇)--- Day2
1.类的定义 1.1 类的格式 ①class为类的关键字 ②在类的内容中还可以写函数,具体格式请看示例。 ③为了区分成员变量,一般习惯上成员变量会加一个特殊标识(如成员变量前面或者后面加_ 或者 m开头,注意C中这个并不是强制的&#x…...
下载firefox.tar.xz后如何将其加入到Gnome启动器
起因:近期(2025-04-07)发现firefox公布了130.0 版本,可以对pdf文档进行签名了,想试一下,所以卸载了我的Debian12上的firefox-esr,直接下载了新版本的tar.xz 包。 经过一番摸索,实现了将其加入Gn…...
VSCode英文翻译插件:变量命名、翻单词、翻句子
目录 【var-translate】 【Google Translate】 【code-translator】 【其他插件】 【var-translate】 非常推荐,可以提供小驼峰、大驼峰、下划线、中划线、常量等翻译,Windows下快捷键为Ctrl Shift v 可以整句英文翻译,并且支持多个免费…...
快速高效的MCP Severs
通用AI Agent的瓶颈 最近一直在用MCP协议开发通用智能体。 虽然大模型本身请求比较慢,但是还可以接受。 而最让人沮丧的是,工具效率也不高 比如社区的filesystem,每次只能创建一个目录,生成文件时,如果目录不存在&…...
原子化 CSS 的常见实现框架
原子化 CSS 是一种 CSS 架构方法,其核心思想是将样式拆分为最小粒度的单一功能类,每个类仅对应一个具体的样式属性(如颜色、边距、字体大小等),通过组合这些类来构建复杂的界面。这种方式强调代码复用性、维护性和灵活…...
技术速递|使用 GitHub Copilot Agent Mode 进行编程
作者:卢建晖 - 微软高级云技术布道师 翻译/排版:Alan Wang GitHub Copilot 持续发展,从最初的代码补全、生成、优化功能,到通过对话交互提升 AI 代码质量的 GitHub Copilot Chat,再到能够基于项目中多个文件的关联进行…...
Linux系统(Ubuntu和树莓派)的远程操作练习
目录 实验准备一、Ubuntu 下的远程操作二、树莓派下的远程操作三、思考 实验准备 1.双方应保证处于同一个局域网内 2.关闭防火墙 (否则别人将不能 ping 通自己,具体说明请参考:windows-关闭防火墙) 3.配置虚拟机 a.网桥模式配置 查询…...