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

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

news 2026/4/2 10:04:06

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

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

修改后的js代码

关键点解析

  1. 动态添加元素：通过 append 方法动态添加表格行，并为每一行生成唯一的 index 属性。

  2. 事件委托：使用 on 方法将事件委托给 tbody，确保动态添加的元素也能触发事件。

  3. 样式控制：通过 css 方法动态修改文本和按钮的样式，实现任务完成状态的切换。

  4. 数据回显：点击“修改”按钮时，将任务内容回显到输入框中，方便用户修改。

// 定义标识，用于生成唯一的索引值
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代码的编写&#xff0c;基于之前实现的todolist小demo&#xff0c;了解如何使用 jQuery 来实现常见的动态交互功能。 修改后的js代码 关键点解析 动态添加…...

编程日记 2025/1/28 18:09:37

2025课题推荐——USBL与DVL数据融合的实时定位系统

准确的定位技术是现代海洋探测、海洋工程和水下机器人操作的基础。超短基线&#xff08;USBL&#xff09;和多普勒速度计&#xff08;DVL&#xff09;是常用的水下定位技术&#xff0c;但单一技术难以应对复杂环境。因此&#xff0c;USBL与DVL的数据融合以构建实时定位系统&…...

编程日记 2025/1/28 18:07:34

滑动窗口详解：解决无重复字符的最长子串问题

滑动窗口详解&#xff1a;解决无重复字符的最长子串问题 在算法面试中&#xff0c;“无重复字符的最长子串”问题是一个经典题目&#xff0c;不仅考察基础数据结构的运用&#xff0c;还能够反映你的逻辑思维能力。而在解决这个问题时&#xff0c;滑动窗口&#xff08;Sliding …...

编程日记 2025/1/28 18:06:32

第05章 11 动量剖面可视化代码一则

在计算流体力学&#xff08;CFD&#xff09;中&#xff0c;动量剖面&#xff08;Momentum Profiles&#xff09;通常用于描述流体在流动方向上的动量分布。在 VTK 中&#xff0c;可以通过读取速度场数据&#xff0c;并计算和展示动量剖面来可视化呈现速度场信息。 示例代码 以…...

编程日记 2025/1/28 18:00:17

MySQL的复制

一、概述 1.复制解决的问题是让一台服务器的数据与其他服务器保持同步&#xff0c;即主库的数据可以同步到多台备库上&#xff0c;备库也可以配置成另外一台服务器的主库。这种操作一般不会增加主库的开销&#xff0c;主要是启用二进制日志带来的开销。 2.两种复制方式&#xf…...

编程日记 2025/1/28 17:56:12

Cpp::IO流(37)

文章目录 前言一、C语言的输入与输出二、什么是流&#xff1f;三、C IO流C标准IO流C文件IO流以写方式打开文件以读方式打开文件 四、stringstream的简单介绍总结 前言 芜湖&#xff0c;要结束喽&#xff01; 一、C语言的输入与输出 C语言中我们用到的最频繁的输入输出方式就是 …...

编程日记 2025/1/28 17:53:06

基于OpenCV实现的答题卡自动判卷系统

一、图像预处理 🌄 二、查找答题卡轮廓 📏 三、透视变换 🔄 四、判卷与评分 🎯 五、主函数 六、完整代码+测试图像集 总结 🌟 在这篇博客中，我将分享如何使用Python结合OpenCV库开发一个答题卡自动判卷系统。这个系统能够自动从扫描的答题卡中提取信…...

编程日记 2025/1/28 17:51:01

如何将电脑桌面默认的C盘设置到D盘？详细操作步骤！

将电脑桌面默认的C盘设置到D盘的详细操作步骤&#xff01; 本博文介绍如何将电脑桌面&#xff08;默认为C盘&#xff09;设置在D盘下。 首先&#xff0c;在D盘建立文件夹Desktop&#xff0c;完整的路径为D:\Desktop。winR&#xff0c;输入Regedit命令。&#xff08;或者单击【…...

编程日记 2025/1/28 17:45:50

二十三种设计模式-享元模式

享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;旨在通过共享相同对象来减少内存使用&#xff0c;尤其适合在大量重复对象的情况下。 核心概念 享元模式的核心思想是将对象的**可共享部分&#xff08;内部状态&#xff09;提取出来进行共…...

编程日记 2025/1/28 17:40:32

算法【有依赖的背包】

有依赖的背包是指多个物品变成一个复合物品&#xff08;互斥&#xff09;&#xff0c;每件复合物品不要和怎么要多种可能性展开。时间复杂度O(物品个数 * 背包容量)&#xff0c;额外空间复杂度O(背包容量)。 下面通过题目加深理解。 题目一 测试链接&#xff1a;[NOIP2006 提…...

编程日记 2025/1/28 17:36:18

A7. Jenkins Pipeline自动化构建过程，可灵活配置多项目、多模块服务实战

服务容器化构建的环境配置构建前需要解决什么下面我们带着问题分析构建的过程：1. 如何解决jenkins执行环境与shell脚本执行环境不一致问题？2. 构建之前动态修改项目的环境变量3. 在通过容器打包时避免不了会产生比较多的不可用的镜像资源，这些资源要是不及时删除掉时会导致服…...

编程日记 2025/1/28 17:34:03

飞牛NAS新增虚拟机功能，如果使用虚拟机网卡直通安装ikuai软路由（如何解决OVS网桥绑定失败以及打开ovs后无法访问飞牛nas等问题）

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 飞牛NAS虚拟机安装爱快教程 📒🛠️ 前期准备🌐 网络要求💾 下载爱快镜像🚀 开始安装💻 开启IOMMU直通🌐 配置网络🚨 解决OVS网桥绑定失败以及打开ovs后无法访问飞牛nas等问题➕ 创建虚拟机🎯 安装ikuai💻 进…...

编程日记 2025/1/28 17:32:54

蓝桥杯例题四

每个人都有无限潜能&#xff0c;只要你敢于去追求&#xff0c;你就能超越自己&#xff0c;实现梦想。人生的道路上会有困难和挑战&#xff0c;但这些都是成长的机会。不要被过去的失败所束缚&#xff0c;要相信自己的能力&#xff0c;坚持不懈地努力奋斗。成功需要付出汗水和努…...

编程日记 2025/1/28 17:30:52

八股——Java基础（四）

目录 一、泛型 1. Java中的泛型是什么 ? 2. 使用泛型的好处是什么? 3. Java泛型的原理是什么 ? 什么是类型擦除 ? 4.什么是泛型中的限定通配符和非限定通配符 ? 5. List和List 之间有什么区别 ? 6. 可以把List传递给一个接受List参数的方法吗&#xff1f; 7. Arra…...

编程日记 2025/1/28 17:28:49

CVE-2023-38831 漏洞复现：win10 压缩包挂马攻击剖析

目录 前言 漏洞介绍 漏洞原理 产生条件 影响范围 防御措施 复现步骤 环境准备 具体操作 前言 在网络安全这片没有硝烟的战场上&#xff0c;新型漏洞如同隐匿的暗箭&#xff0c;时刻威胁着我们的数字生活。其中&#xff0c;CVE - 2023 - 38831 这个关联 Win10 压缩包挂…...

编程日记 2025/1/28 17:25:45

【自然语言处理（NLP）】深度循环神经网络（Deep Recurrent Neural Network，DRNN）原理和实现

文章目录 介绍深度循环神经网络&#xff08;DRNN&#xff09;原理和实现结构特点工作原理符号含义公式含义 应用领域优势与挑战DRNN 代码实现 个人主页&#xff1a;道友老李 欢迎加入社区&#xff1a;道友老李的学习社区 介绍 **自然语言处理&#xff08;Natural Language Pr…...

编程日记 2025/1/28 17:24:44

Linux 命令之技巧（Tips for Linux Commands）

Linux 命令之技巧 简介 Linux ‌是一种免费使用和自由传播的类Unix操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹&#xff08;Linus Benedict Torvalds&#xff09;于1991年10月5日首次发布。Linux继承了Unix以网络为核心的设计思想&#xff0c;是一个性能稳定的多用户…...

编程日记 2025/1/28 17:23:42

【文星索引】搜索引擎项目测试报告

目录 一、项目背景二、 项目功能2.1 数据收集与索引2.2 API搜索功能2.3 用户体验与界面设计2.4 性能优化与维护 三、测试报告3.1 功能测试3.2 界面测试3.3 性能测试3.4 兼容性测试3.5 自动化测试 四、测试总结4.1 功能测试方面4.2 性能测试方面4.3 用户界面测试方面 一、项目背…...

编程日记 2025/1/28 17:22:41

低代码系统-产品架构案例介绍、轻流（九）

轻流低代码产品定位为零代码产品&#xff0c;试图通过搭建来降低企业成本&#xff0c;提升业务上线效率。 依旧是从下至上&#xff0c;从左至右的顺序 名词概述运维层底层系统运维层&#xff0c;例如上线、部署等基础服务体系内置的系统能力&#xff0c;发消息、组织和权限是必…...

编程日记 2025/1/28 17:18:35

二叉树（补充）

二叉树 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化 2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序 1.二叉树的基本特性…...

编程日记 2025/1/28 17:17:31

哔哩下载姬：三步搞定B站视频永久收藏的智能工具

哔哩下载姬&#xff1a;三步搞定B站视频永久收藏的智能工具 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等&#xff09;…...

编程新知 2026/4/2 8:38:09

突破性数字音乐解放方案：QMCDecode实战指南与3大智能转换场景解密

突破性数字音乐解放方案&#xff1a;QMCDecode实战指南与3大智能转换场景解密 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#…...

编程新知 2026/4/2 8:36:07

OpenClaw健康监测：用Phi-3-mini-128k-instruct分析智能手表数据

OpenClaw健康监测&#xff1a;用Phi-3-mini-128k-instruct分析智能手表数据 1. 为什么选择OpenClaw处理健康数据&#xff1f; 去年体检报告上的几项异常指标让我开始关注日常健康监测。虽然手环和智能手表能记录睡眠、心率等数据&#xff0c;但原始数据报表就像一本天书——我…...

编程新知 2026/4/2 7:02:53

人工智能应用快速原型开发：基于PyTorch 2.8和Gradio构建交互式Demo

人工智能应用快速原型开发&#xff1a;基于PyTorch 2.8和Gradio构建交互式Demo 1. 为什么需要快速原型开发工具 在人工智能领域&#xff0c;一个好想法从诞生到落地往往需要经历漫长的验证过程。传统方式下&#xff0c;即使训练出了一个效果不错的模型&#xff0c;想要展示给…...

编程新知 2026/4/2 6:46:40

小型工作室利器：OpenClaw+Qwen3.5-9B实现设计稿自动标注

小型工作室利器&#xff1a;OpenClawQwen3.5-9B实现设计稿自动标注 1. 为什么我们需要设计稿自动标注 作为一个小型设计工作室的技术负责人&#xff0c;我最近一直在寻找解决团队协作痛点的方案。设计师们每天都要花费大量时间手动标注PSD文件中的图层尺寸、间距和颜色值&…...

编程新知 2026/4/2 6:40:39

非参数回归实战：从理论到Python实现

1. 非参数回归&#xff1a;当数据拒绝被简单定义时 记得第一次接触回归分析时&#xff0c;老师用"用直线拟合数据点"来解释线性回归。但当我把这个方法用在实际项目中时&#xff0c;发现很多数据根本不像教科书里画的那样规整。那些弯弯曲曲的数据点&#xff0c;像是…...

编程新知 2026/4/2 6:06:16

Leather Dress Collection实战案例：用Leather TankTop Pants生成运动风皮革穿搭图集

Leather Dress Collection实战案例&#xff1a;用Leather TankTop Pants生成运动风皮革穿搭图集 1. 引言&#xff1a;当皮革遇上运动风 想象一下&#xff0c;你正在为一个运动潮牌设计新一季的视觉素材。客户想要一种既酷炫又充满活力的感觉——皮革的质感&#xff0c;运动的…...

编程新知 2026/4/2 4:45:33

极验点选验证码识别避坑指南：如何应对验证码图片更新带来的挑战

极验点选验证码动态对抗实战&#xff1a;从数据迭代到模型优化的全链路解决方案 当你的验证码识别模型突然失效时&#xff0c;第一反应是什么&#xff1f;上个月刚跑通的极验点选验证码识别系统&#xff0c;在验证码图片更新后准确率从92%暴跌至17%&#xff0c;这是我们团队最近…...

编程新知 2026/4/2 3:46:27

Pixel Couplet Gen基础教程：Streamlit+ModelScope零配置环境搭建步骤详解

Pixel Couplet Gen基础教程&#xff1a;StreamlitModelScope零配置环境搭建步骤详解 1. 项目介绍与准备 Pixel Couplet Gen是一款融合了传统春节文化与现代像素艺术风格的AI春联生成器。它基于ModelScope大模型驱动&#xff0c;通过Streamlit构建了独特的8-bit复古游戏界面&a…...

编程新知 2026/4/2 3:38:16

OpenClaw对话式编程：Qwen3-4B模型解释代码与生成示例

OpenClaw对话式编程&#xff1a;Qwen3-4B模型解释代码与生成示例 1. 为什么需要对话式编程&#xff1f; 作为一名长期与代码打交道的开发者&#xff0c;我经常遇到这样的困境&#xff1a;面对一段复杂代码时&#xff0c;需要反复查阅文档&#xff1b;学习新框架时&#xff0c…...

编程新知 2026/4/2 3:34:06