当前位置：首页 > news >正文

前端【11】HTML+CSS+jQUery实战项目--实现一个简单的todolist

news 来源：原创 2025/5/17 20:35:25

前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表 (To-Do List)-CSDN博客

学过jQUery可以极大简化js代码的编写，基于之前实现的todolist小demo，了解如何使用 jQuery 来实现常见的动态交互功能。

修改后的js代码

关键点解析

动态添加元素：通过 append 方法动态添加表格行，并为每一行生成唯一的 index 属性。
事件委托：使用 on 方法将事件委托给 tbody，确保动态添加的元素也能触发事件。
样式控制：通过 css 方法动态修改文本和按钮的样式，实现任务完成状态的切换。
数据回显：点击“修改”按钮时，将任务内容回显到输入框中，方便用户修改。

// 定义标识，用于生成唯一的索引值
var flag = 1;// 存储当前修改的是哪条信息的索引
var targetFlag = 0;// 添加新行/修改    
$(".btn").on("click", function () {// 获取输入框的内容并去除首尾空格var text = $(".content").val().trim();// 如果输入框内容为空，弹出提示if (text.length == 0) {alert("请输入内容");} else {// 如果按钮的值为“修改”，则执行修改逻辑if ($('.btn').val() == "修改") {// 获取所有第一列的td元素var tds = $('tbody tr td:nth-child(1)');// 遍历所有td元素，找到与targetFlag匹配的索引for (var i = 0; i < tds.length; i++) {if (tds.eq(i).attr('index') == targetFlag) {// 修改对应td的文本内容tds.eq(i).text(text);}}// 将按钮的值重置为“添加”$('.btn').val("添加");// 清空输入框内容$(".content").val('');return;}// 使用输入的内容创建新行$("tbody").append('<tr>' +'<td index=' + (flag++) + '>' + text + '</td>' + // 第一列，显示文本内容，并赋予唯一索引'<td>' +'<input type="button" value="完成" class="finish">' + // 完成按钮'<input type="button" value="删除" class="delete">' + // 删除按钮'<input type="button" value="修改" class="update">' + // 修改按钮'</td>' +'</tr>');// 清空输入框内容$(".content").val('');}
});// 完成/恢复按钮点击事件
$("tbody").on("click", ".finish", function () {// 获取当前点击的按钮的上一个兄弟元素（即文本所在的td）var target = $(this).parent().prev();// 如果按钮的值为“恢复”if ($(this).val() == "恢复") {// 将按钮的值改为“完成”，并设置样式$(this).val("完成").css({'color': '#910000','border-color': '#910000'});// 设置文本的样式为未完成状态target.css({'color': '#910000','textDecoration': 'none',});} else {// 将按钮的值改为“恢复”，并设置样式$(this).val("恢复").css({'color': '#888','border-color': '#888'});// 设置文本的样式为完成状态（灰色，带删除线）target.css({'color': '#888','textDecoration': 'line-through',});}
});// 删除按钮点击事件
$("tbody").on("click", ".delete", function () {// 如果前一个按钮的值为“恢复”（即任务已完成）if ($(this).prev().val() == "恢复") {// 弹出确认框，确认是否删除if (confirm('确定要删除吗')) {// 删除当前行的tr元素$(this).parent().parent().remove();}} else {// 如果任务未完成，弹出提示alert("请努力完成！！");}
});// 修改按钮点击事件
$("tbody").on("click", ".update", function () {// 如果前一个按钮的值为“完成”（即任务未完成）if ($(this).prev().prev().val() == "完成") {// 获取当前行的文本内容var text = $(this).parent().prev().text();// 获取当前行的索引值targetFlag = $(this).parent().prev().attr('index');// 将文本内容回显到输入框$('.content').val(text);// 将按钮的值改为“修改”$(".btn").val("修改");} else {// 如果任务已完成，弹出提示alert("已经完成啦不用再改啦");// 清空输入框内容$('.content').val("");}
});

修改后的html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/todolist.css"><script src="js/jQuery.min.js"></script><script src="js/todolist_jquery.js" defer></script>
</head><body><div class="container"><div class="top"><input type="text" class="content"><input type="button" value="添加" class="btn"></div><table border="1"><thead><tr><th>内容</th><th>操作</th></tr></thead><tbody><!-- <tr><td>今天学习</td><td><input type="button" value="完成" class="finish"><input type="button" value="删除" class="delete"><input type="button" value="修改" class="update"></td></tr><tr><td>今天学习</td><td><input type="button" value="完成" class="finish"><input type="button" value="删除" class="delete"><input type="button" value="修改" class="update"></td></tr><tr><td>今天学习</td><td><input type="button" value="完成" class="finish"><input type="button" value="删除" class="delete"><input type="button" value="修改" class="update"></td></tr><tr><td>今天学习</td><td><input type="button" value="完成" class="finish"><input type="button" value="删除" class="delete"><input type="button" value="修改" class="update"></td></tr> --></tbody></table></div>
</body></html>

至此前端的学习暂时告一段落啦~

前端【11】HTML+CSS+jQUery实战项目--实现一个简单的todolist

前端【8】HTMLCSSjavascript实战项目----实现一个简单的待办事项列表 (To-Do List)-CSDN博客学过jQUery可以极大简化js代码的编写，基于之前实现的todolist小demo，了解如何使用 jQuery 来实现常见的动态交互功能。修改后的js代码关键点解析动态添加…...

编程日记 2025/5/17 20:35:25

Vscode的AI插件 —— Cline

简介 vscode的一款AI辅助吃插件，主要用来辅助创建和编辑文件，探索大型项目，使用浏览器并执行终端命令（需要多个tokens），可以使用模型上下文协议（MCP）来创建新工具并扩展自己(比较慢…...

编程日记 2025/5/17 20:09:02

HTML表单深度解析：GET 和 POST 提交方法

系列文章目录 01-从零开始学 HTML：构建网页的基本框架与技巧 02-HTML常见文本标签解析：从基础到进阶的全面指南 03-HTML从入门到精通：链接与图像标签全解析 04-HTML 列表标签全解析：无序与有序列表的深度应用 05-HTML表格标签全面…...

编程日记 2025/5/15 17:50:34

CycleGAN模型解读（附源码+论文）

CycleGAN 论文链接：Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks 官方链接：pytorch-CycleGAN-and-pix2pix 老规矩，先看看效果总体流程先简单过一遍流程，细节在代码里说。CycleGAN有…...

编程日记 2025/5/17 20:14:34

WebAssembly(Wasm)详解

WebAssembly 详解：开启 Web 应用的新纪元引言 WebAssembly（简称 Wasm）是一种革命性的技术，它为 Web 应用带来了接近原生的性能，并支持使用多种编程语言进行开发。本文将深入探讨 WebAssembly 的方方面面&#xff0c…...

编程日记 2025/5/17 8:03:21

基于物联网设计的疫苗冷链物流监测系统

一、前言 1.1 项目开发背景随着全球经济的发展和物流行业的不断创新，疫苗和生物制品的运输要求变得越来越高。尤其是疫苗的冷链物流，温度、湿度等环境因素的控制直接关系到疫苗的质量和效力，因此高效、可靠的冷链监控系统显得尤为重要。冷…...

编程日记 2025/5/17 5:23:38

RabbitMQ 多种安装模式

文章目录前言一、Windows 安装 RabbitMq1、版本关系2、Erlang2.1、下载安装 Erlang 23.12.2、配置 Erlang 环境变量 3、RabbitMQ3.1、下载安装 RabbitMQ 3.8.93.2、环境变量3.3、启动RabbitMQ 管理插件3.3、RabbitMQ3.4、注意事项二、安装docker1、更新系统包：2、…...

编程日记 2025/5/16 1:31:13

视频拼接，拼接时长版本

目录视频较长，分辨率较大，这个效果很好，不耗用内存 ffmpeg imageio，适合视频较短视频较长，分辨率较大，这个效果很好，不耗用内存 ffmpeg import subprocess import glob import os from nats…...

编程日记 2025/5/15 21:48:44

【Linux探索学习】第二十七弹——信号（一）：Linux 信号基础详解

Linux学习笔记： https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言： 前面我们已经将进程通信部分讲完了，现在我们来讲一个进程部分也非常重要的知识点——信号，信号也是进程间通信的一…...

编程日记 2025/5/13 11:43:26

有限元分析学习——Anasys Workbanch第一阶段笔记梳理

第一阶段笔记主要源自于哔哩哔哩《ANSYS-workbench 有限元分析应用基础教程》张晔主要内容导图： 笔记导航如下： Anasys Workbanch第一阶段笔记(1)基本信息与结果解读_有限元分析变形比例-CSDN博客 Anasys Workbanch第一阶段笔记(2)网格单元与应力奇…...

编程日记 2025/5/12 4:06:12

【YOLOv11改进- 注意力机制】YOLOv11+SCSA注意力机制（2024）: 最新空间和通道协同注意力,助力YOLOv11有效涨点；包含二次创新

YOLOV11目标检测改进实例与创新改进专栏专栏地址：YOLOv11目标检测改进专栏，包括backbone、neck、loss、分配策略、组合改进、原创改进等；本文介绍本文给大家带来的改进内容是在YOLOv11中添加SCSA注意力机制，助力有效涨点。作者提出了一种新的空间与通道协同注意模块（S…...

编程日记 2025/5/15 12:52:19

科技快讯 | 理想官宣：正式收费！WeChat 港币钱包拓宽商户网络；百川智能发布深度思考模型Baichuan-M1-preview

理想官宣：正式收费！ 1月23日，理想汽车宣布，理想超充站超时占用费正式运营。触发超时占用费的条件为充电结束后15分钟内未将充电枪插回充电桩，收费标准为2元/分钟，单次封顶200元。理想汽车将在充电结束的四个…...

编程日记 2025/5/10 13:13:53

LLM架构与优化：从理论到实践的关键技术

标题：“LLM架构与优化：从理论到实践的关键技术” 文章信息摘要： 文章探讨了大型语言模型（LLM）开发与应用中的关键技术，包括Transformer架构、注意力机制、采样技术、Tokenization等基础理论，以…...

编程日记 2025/5/16 9:37:55

深入理解Pytest中的Setup和Teardown

关注开源优测不迷路大数据测试过程、策略及挑战测试框架原理，构建成功的基石在自动化测试工作之前，你应该知道的10条建议在自动化测试中，重要的不是工具对于简单程序而言，使用 Pytest 运行测试直截了当。然而，当你…...

编程日记 2025/5/14 4:21:14

PostgreSQL 约束

PostgreSQL 约束引言在数据库设计中，约束是确保数据完整性和一致性的关键工具。PostgreSQL，作为一款功能强大的开源关系型数据库管理系统，提供了丰富的约束类型来满足不同的数据库设计需求。本文将详细介绍PostgreSQL中的各种约束，包括其定义、用途和实现方法。一、约…...

编程日记 2025/5/12 0:08:52

JAVA 接口、抽象类的关系和用处详细解析

接口 - Java教程 - 廖雪峰的官方网站一个抽象类如果实现了一个接口，可以只选择实现接口中的部分方法（所有的方法都要有，可以一部分已经写具体，另一部分继续保留抽象），原因在于： 抽象类本身…...

编程日记 2025/5/8 7:52:26

【微服务与分布式实践】探索 Dubbo

核心组件服务注册与发现原理服务提供者启动时，会将其服务信息（如服务名、版本、所在节点的网络地址等）注册到注册中心。服务消费者则可以从注册中心发现可用的服务提供者列表，并与之通信。注册中心会存储服务的信息&#xff0c…...

编程日记 2025/5/15 0:49:52

lightweight-charts-python 包更新 lightweight-charts.js 的方法

lightweight-charts-python 是 lightweight-charts.js 的 python 包装，非常好用 lightweight-charts 更新比较频繁，导致 lightweight-charts-python 内置的 lightweight-charts 经常不是最新的。新的 lightweight-charts 通常可以获得性能改进和bug修复…...

编程日记 2025/5/17 14:00:44

作業系統：設計與實現-母本

2023 南京大學《作業系統：設計與實現》課程主頁（含講義）：https://jyywiki.cn/OS/2023/ 【Python 实现操作系统模型 [南京大学2023操作系统-P4] (蒋炎岩)-哔哩哔哩】 https://b23.tv/jakxDbh 用Python实现操作系统模型讲义一、操作系统基础概念 1.1 定义操作系统（Oper…...

编程日记 2025/5/13 22:33:38

穿心莲内酯（andrographolide）生物合成CYP72-文献精读106

Two CYP72 enzymes function as Ent-labdane hydroxylases in the biosynthesis of andrographolide in Andrographis paniculata 两种CYP72酶在穿心莲（Andrographis paniculata）中作为Ent-labdane羟化酶，在穿心莲内酯（andrograp…...

编程日记 2025/5/17 9:20:53

IDM-VTON本地部署教程：双重编码 + 文字提示，解锁真实野外试穿

一、介绍 IDM-VTON：改进扩散模型，实现真实的野外虚拟试穿。技术原理：改进扩散模型，利用视觉编码器提取服装高级语义信息并与交叉注意力层融合，通过并行 UNet 结构的 GarmentNet 捕捉服装低级特征并与自注意力层结合&…...

编程日记 2025/5/17 15:54:52

【微服务与分布式实践】探索 Sentinel

参数设置熔断时长、最小请求数、最大RT ms、比例阈值、异常数熔断策略慢调⽤⽐例当单位统计时⻓内请求数⽬⼤于设置的最⼩请求数⽬，并且慢调⽤的⽐例⼤于阈值，则接下来的熔断时⻓内请求会⾃动被熔断异常⽐例当单位统计时⻓内请求数⽬⼤于设置…...

编程日记 2025/5/17 20:31:45

云计算与虚拟化技术讲解视频分享

互联网各领域资料分享专区(不定期更新)： Sheet 前言由于内容较多，且不便于排版，为避免资源失效，请用手机点击链接进行保存，若链接生效请及时反馈，谢谢~ 正文链接如下（为避免资源失效&#x…...

编程日记 2025/5/12 0:53:43

[c语言日寄]越界访问：意外的死循环

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还是…...

编程日记 2025/5/17 20:18:14

数据结构---哈希表

基本概念哈希函数（Hash Function）是一种将输入的数据（通常是任意大小的）映射到固定大小的输出（通常是一个固定长度的值）的函数。这个输出值通常称为“哈希值”（Hash Value）或“哈希…...

编程日记 2025/5/15 17:38:11

【C语言----数组详解】

目录 ---------------------------------------begin--------------------------------------- 一、什么是数组二、数组的声明和初始化 1. 数组的声明 2. 数组的初始化三、数组元素的访问四、数组的遍历五、数组的应用六、多维数组七、总结 --------------------…...

编程日记 2025/5/12 0:24:19

C语言字符串详解

1. C语言中的字符串基础 C语言中的字符串是程序设计中不可忽视的部分。与现代高级编程语言不同，C语言对字符串的处理方式直接、灵活，并且强大。在C语言中，字符串并不是一种特殊的数据类型，而是字符数组的一种表现形式。字符串通常…...

编程日记 2025/5/15 17:50:34

基础IO（2）

基础IO（2） 理解“⼀切皆⽂件” ⾸先，在windows中是⽂件的东西，它们在linux中也是⽂件；其次⼀些在windows中不是⽂件的东西，⽐如进程、磁盘、显⽰器、键盘这样硬件设备也被抽象成了⽂件，你可以使…...

编程日记 2025/5/13 13:02:04

深入理解 Python 中的 `all`：控制模块的公共接口

在 Python 编程中，模块化设计是构建可维护和可扩展代码的关键。模块不仅帮助我们组织代码，还能通过隐藏实现细节来提高代码的可读性和安全性。Python 提供了多种机制来控制模块的可见性，其中 __all__ 是一个非常重要但常被忽视的特性。本文将…...

编程日记 2025/5/14 7:48:10

Python面试宝典7 | 正则表达式的match()与search()，精准匹配与全局搜索

今天，我们来聊聊Python正则表达式中两个常用的方法：match()和search()。它们都用于在字符串中查找匹配的模式，但有着重要的区别。理论篇：匹配的起始位置 match()和search()最主要的区别在于它们匹配的起始位置： ma…...

编程日记 2025/5/17 20:28:12

代码随想录算法训练营第三十八天-动态规划-完全背包-279.完全平方数

把目标值当作背包容量，每个平方数当作物品，题目变更为装满指定容量的背包，最小用几个物品会不会出现拼凑不出来的情况？不会，因为有数字1，对任意正整数百分百能拼凑出来因此此题目与上一道题就变得一模一样了…...

编程日记 2025/5/17 15:16:20

996引擎 - NPC-添加NPC引擎自带形象

996引擎 - NPC-添加NPC引擎自带形象截图参考添加NPC参考资料截图参考添加NPC 编辑NPC表：Envir\DATA\cfg_npclist.xls 1.1. 需要临时隐藏NPC时可以在id前加 // 1.2. 如果NPC朝向不对，可以调整dir 列。（按8方向，上是0顺时针数。我这里给的4） 1.3. 形象代码：NPC代码、怪物…...

编程日记 2025/5/16 23:25:14

基于 NodeJs 一个后端接口的创建过程及其规范 -- 【elpis全栈项目】

基于 NodeJs 一个后端接口的创建过程及其规范一个接口的诞生： #mermaid-svg-46HXZKI3fdnO0rKV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-46HXZKI3fdnO0rKV .error-icon{fill:#552222;}#mermaid-sv…...

编程日记 2025/5/17 20:33:44

笔记本跑大模型尝试

1，笔记本电脑资源我是一台联想笔记本电脑，基本配置如下： CPU：12th Gen Intel(R) Core(TM) i7-1255U 1.70 GHz (12核心，2个P核和8个E核，共计10个核心) 显卡：NVIDIA GeForce MX550 内存&am…...

编程日记 2025/5/15 4:41:02

[论文阅读] (37)CCS21 DeepAID：基于深度学习的异常检测（解释）

祝大家新春快乐，蛇年吉祥！ 《娜璋带你读论文》系列主要是督促自己阅读优秀论文及听取学术讲座，并分享给大家，希望您喜欢。由于作者的英文水平和学术能力不高，需要不断提升，所以还请大家批评指正&#xff0…...

编程日记 2025/5/12 2:48:34

常见端口的攻击思路

端口号端口说明攻击方向21/22/69FTP/TFTP文件传输协议匿名上传/下载、嗅探、爆破2049NFS服务配置不当139Sanba服务爆破、远程代码执行389Ldap目录访问协议注入、匿名访问、弱口令22SSH远程连接爆破、SSH映射隧道搭建、文件传输23Telnet远程连接爆破、嗅探、弱口令3389RDP远程桌…...

编程日记 2025/5/15 22:15:35

复古壁纸中棕色系和米色系哪个更受欢迎？

根据最新的搜索结果，我们可以看到棕色系和米色系在复古壁纸设计中都非常受欢迎。以下是对这两种颜色系受欢迎程度的分析： 棕色系受欢迎程度：棕色系在复古壁纸中非常受欢迎，因为它能够营造出温暖、质朴和自然的氛围。棕色系的壁纸…...

编程日记 2025/5/13 17:08:12

RocketMQ消息是如何存储的？

大家好，我是锋哥。今天分享关于【RocketMQ消息是如何存储的？】面试题。希望对大家有帮助； RocketMQ消息是如何存储的？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 RocketMQ 使用了一个高性能、分布式的消息存储架构…...

编程日记 2025/5/13 17:16:26

在FreeBSD下安装Ollama并体验DeepSeek r1大模型

在FreeBSD下安装Ollama并体验DeepSeek r1大模型在FreeBSD下安装Ollama 直接使用pkg安装即可： sudo pkg install ollama 安装完成后，提示： You installed ollama: the AI model runner. To run ollama, plese open 2 terminals. 1. In t…...

编程日记 2025/5/17 17:10:38

[250128] Apache HTTP Server 2.4.63 发布 | Arm 发布首个芯片系统架构的公开规范

目录 Apache HTTP Server 2.4.63 发布，十五年创新成果！Arm 发布首个芯片系统架构的公开规范 Apache HTTP Server 2.4.63 发布，十五年创新成果！ Apache 软件基金会和 Apache HTTP Server 项目组自豪地宣布 Apache HTTP Server 2.4…...

编程日记 2025/5/11 4:31:56

为什么要学习rust

内存管理：对于我来说，我就喜欢它的内存管理。我做了一个webapi，取100万行数据，导出到xlsx，再把这个xlsx文件发送给前端。分别用了java、c#、go和rust进行了相同的操作。只有rust做到了，启动时8MB内存&#…...

编程日记 2025/5/15 4:40:37

Linux进程调度与等待：背后的机制与实现

个人主页：chian-ocean 文章专栏-Linux 前言： 当一个进程发起某种操作（如I/O请求、信号、锁的获取等），但该操作需要的资源暂时不可用时，进程会被操作系统挂起，进入“等待队列”或“阻塞状态”。…...

编程日记 2025/5/12 5:43:04

Linux任务管理与守护进程

文章目录 🍅任务管理进程组概念作业概念会话概念相关操作前台进程&后台进程jobsfgbgps命令查看指定的选项 🫒守护进程守护进程的概念作用守护进程的查看守护进程的创建原生创建守护进程调用daemon函数创建守护进程模拟实现daemon函数 🍅任…...

编程日记 2025/5/14 21:10:55

《Trustzone/TEE/安全从入门到精通-标准版》

CSDN学院课程连接：https://edu.csdn.net/course/detail/39573 讲师介绍拥有 12 年手机安全、汽车安全、芯片安全开发经验，擅长 Trustzone/TEE/ 安全的设计与开发，对 ARM 架构的安全领域有着深入的研究和丰富的实践经验，能够将复杂的安全知识和处理器架构知识进行系统整…...

编程日记 2025/5/15 5:25:56

java 字符串日期字段格式化前端显示

在 Java 应用程序中，如果你有一个字符串类型的日期字段，并希望将其格式化后显示在前端，可以通过多种方式实现。这通常涉及到在后端将字符串转换为 Date 或 LocalDateTime 等对象，然后使用适当的注解或配置来确保它们以正确的格式序…...

编程日记 2025/5/10 4:25:46

LabVIEW橡胶动态特性测试系统

本文介绍了一个利用LabVIEW软件和NI高速数据采集设备构建的橡胶动态特性测试系统。该系统实现了橡胶材料动态性能的精确测量，并通过虚拟仪器技术，提高了测试数据的处理效率和准确性。系统支持实时数据处理和多种信号的动态分析，适用于工业和科…...

编程日记 2025/5/14 2:58:58

deepseek-r1 本地部署

deepseek 最近太火了 1：环境 win10 cpu 6c 内存 16G 2: 部署 1>首先下载ollama 官网：https://ollama.com ollama 安装在c盘模型可以配置下载到其他盘 OLLAMA_MODELS D:\Ollama 2>下载模型并运行 ollama run deepseek-r1:<标签> 1.5b 7b 8…...

编程日记 2025/5/13 7:42:30