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

JavaScript中todolist操作--待办事项的添加 删除 完成功能

news 2026/2/9 11:44:29

效果图

在文本框中输入内容点击添加按钮会在下面生成

添加功能

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><script src="js/todolist.js" defer></script><style>* {padding: 0;margin: 0;}.container {width: 25%;margin: 100px auto;min-width: 260px;}.container>div {display: flex;margin-bottom: 10px;}.container>div .content {width: 85%;/* 外轮廓去掉 */outline: none;padding: 3px 10px;border: 2px solid rgb(165, 41, 31);border-radius: 6px 0 0 6px;}.container>div .add {width: 15%;padding: 3px;background: rgb(165, 41, 31);color: #fff;border: none;border-radius: 0 6px 6px 0;cursor: pointer;}table {width: 100%;text-align: center;border-collapse: collapse;border: #fff 2px solid;}table thead tr {background: rgb(165, 41, 31);color: #fff;}table thead tr th {padding: 4px;font-size: 14px;}table tbody tr {background: #ddd;font-size: 13px;}table tbody tr:nth-child(even) {background: #eee;}table tbody tr td {padding: 4px;}table tbody tr input {border: 1px solid rgb(165, 41, 31);background: none;color: rgb(165, 41, 31);font-size: 12px;padding: 2px 5px;cursor: pointer;border-radius: 4px;}table tbody tr input:hover {box-shadow: 2px 2px 2px rgb(165, 41, 31);}</style>
</head>
<body><div class="container"><div><input type="text" class="content"><input type="button" value="添加" class="add"></div><table border="1"><thead><tr><th>待办事项</th><th>操作</th></tr></thead><tbody></tbody></table></div>
</body>
</html>

js

//增加
var arr=document.querySelector(".add")
var content=document.querySelector(".content")
var tbody=document.querySelector("tbody")
arr.onclick=function()
{   //trim()去掉字符串前后空格  防止全输入空格也会添加if(content.value.trim()){var tr=document.createElement("tr")var td1=document.createElement("td")var td2=document.createElement("td")td1.innerText=content.valuetd2.innerHTML='<input type="button" value="删除"><input type="button" value="修改"><input type="button" value="完成">'tr.appendChild(td1)tr.appendChild(td2)//添加元素要用父级元素添加子级元素tbody.appendChild(tr)content.value=""//添加之后文本框变为空}
}

 完成功能

点击完成之后事项加中划线 颜色变灰

注意这个功能要写在添加里面

删除 修改等功能同理

因为只有实现添加之后才会出现按钮

//增加
var arr=document.querySelector(".add")
var content=document.querySelector(".content")
var tbody=document.querySelector("tbody")
arr.onclick=function()
{   //trim()去掉字符串前后空格  防止全输入空格也会添加if(content.value.trim()){var tr=document.createElement("tr")var td1=document.createElement("td")var td2=document.createElement("td")td1.innerText=content.valuetd2.innerHTML='<input type="button" value="删除"><input type="button" value="修改"><input type="button" class="finish" value="完成">'tr.appendChild(td1)tr.appendChild(td2)tbody.appendChild(tr)content.value=""}var finish=document.getElementsByClassName("finish")//找到完成这个按钮以绑定事件for(var j=0;j<finish.length;j++){finish[j].onclick=function(){var target=this.parentElement.previousElementSibling//this是一个按钮 父级是td 父级的前一个也是td 就是输入的内容target.style.color="#999" target.style.textDocration="line-through"}}
}

对完成功能的改善 增加合理性

 var finish=document.getElementsByClassName("finish")for(var j=0;j<finish.length;j++){finish[j].onclick=function(){   var target=this.parentElement.previousElementSiblingif(target.style.textDocration=="line-through"){   this.value="完成"target.style.color="#000" target.style.textDocration="none"}else{   this.value="撤销"target.style.color="#999" target.style.textDocration="line-through"}console.log(target.style.textDocration)}}

 

删除功能

 //删除var deletes=document.getElementsByClassName("delete")for(var k=0;k<deletes.length;k++){deletes[k].onclick=function(){   //如果是完成的才能删  未完成不能删if(this.parentElement.previousElementSibling.style.textDocration=="line-through"){tbody.removeChild(this.parentElement.parentElement)}else{alert("继续努力吧")}//点击这个按钮的父级是三个按钮被包含的td 再父级是tr//tr包含三个按钮和待办事项的值 所以要把整个tr删了//找到tr的父级tbody调用方法就可以删除}}

修改功能

 //查找修改按钮var update = document.getElementsByClassName("update")for (var j = 0; j < update.length; j++) {//回显update[j].onclick = function() {var target = this.parentElement.previousElementSibling//如果该事项已经完成，则不做修改if (target.style.textDecoration == "line-through") {alert("事情已经完成，无需修改")} else {content.value = target.innerTextadd.value = "修改"flag = 1num = target.getAttribute("index")}}if (flag == 1) {var tds = document.querySelectorAll("tbody tr td:nth-child(1)")for (var j = 0; j < tds.length; j++) {if (tds[j].getAttribute("index") == num) {// 相等则进行修改tds[j].innerText = content.valuecontent.value = ""add.value = "添加"flag = 0}}return}

全部代码

var add = document.querySelector(".add")
var content = document.querySelector(".content")
var tbody = document.querySelector("tbody")//标志变量  0添加 1修改
var flag = 0
var index = 0//记录当前被修改的是哪条信息
var numadd.onclick = function() {//修改if (flag == 1) {var tds = document.querySelectorAll("tbody tr td:nth-child(1)")for (var j = 0; j < tds.length; j++) {if (tds[j].getAttribute("index") == num) {// 相等则进行修改tds[j].innerText = content.valuecontent.value = ""add.value = "添加"flag = 0}}return}// trim()去掉字符串前后的空格//添加if (content.value.trim()) {var tr = document.createElement("tr")var td1 = document.createElement("td")//给单元格绑定属性td1.setAttribute("index", index)index++var td2 = document.createElement("td")td1.innerText = content.valuetd2.innerHTML = '<input type="button" value="删除" class="delete"> <input type="button" value="修改" class="update"> <input type="button" value="完成" class="finish">'tr.appendChild(td1)tr.appendChild(td2)tbody.appendChild(tr)content.value = ""}//查找完成按钮var finish = document.getElementsByClassName("finish")for (var j = 0; j < finish.length; j++) {finish[j].onclick = function() {var target = this.parentElement.previousElementSiblingif (target.style.textDecoration == "line-through") {target.style.color = "#000"target.style.textDecoration = "none"this.value = "完成"} else {this.value = "撤销"target.style.color = "#999"target.style.textDecoration = "line-through"}}}//查找删除按钮var deletes = document.getElementsByClassName("delete")for (var j = 0; j < deletes.length; j++) {deletes[j].onclick = function() {console.log(this.parentElement.previousElementSibling.style.textDecoration)//如果是完成了，删除，如果没有完成不允许删除if (this.parentElement.previousElementSibling.style.textDecoration == "line-through") {//删除一行tbody.removeChild(this.parentElement.parentElement)} else {alert("努力完成吧")}}}//查找修改按钮var update = document.getElementsByClassName("update")for (var j = 0; j < update.length; j++) {//回显update[j].onclick = function() {var target = this.parentElement.previousElementSibling//如果该事项已经完成，则不做修改if (target.style.textDecoration == "line-through") {alert("事情已经完成，无需修改")} else {content.value = target.innerTextadd.value = "修改"flag = 1num = target.getAttribute("index")}}}
}

相关文章：

JavaScript中todolist操作--待办事项的添加 删除 完成功能

效果图 在文本框中输入内容点击添加按钮会在下面生成 添加功能 html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&qu…...

编程日记 2024/12/9 4:41:56

Windows中MySQL8.3.4 MSI版本——详细安装教程

一、下载MySQL安装文件。 下载地址&#xff1a;MySQL官网 进入后点击下面的MySQL社区版下载 点击MySQL Comunity Server。 我这里选择的是版本8.4.3LTS版本&#xff0c;在线对应的msi文件。 点击No thanks,直接下载。 二、安装MySQL 2.1、双击刚刚下载好的msi文件&#xff0c;…...

编程日记 2024/12/9 4:37:51

MySQL-DDL之数据库操作

文章目录 一. 创建数据库1. 直接创建数据库&#xff0c;如果存在则报错2. 如果数据库不存在则创建3. 创建数据库时设置字符集4. 栗子 二. 查看数据库1. 查看数据库 三. 删除数据库1. 删除数据库 四. 使用数据库1. 使用数据库2. 查看正在使用的数据库 数据定义语言&#xff1a;简…...

编程日记 2024/12/9 4:31:43

Python 笔记之进程通信

当需要创建的子进程数量不多时&#xff0c;可以直接利用multiprocessing中的Process动态生成多个进程 但是如果是上百个或者上千个目标&#xff0c;手动去创建进程的工作量很大&#xff0c;此时就可以利用到Multiprocessing模块提供的Pool方法 初始化pool时&#xff0c;可以指定…...

编程日记 2024/12/9 4:29:41

【Transformer序列预测】Pytorch中构建Transformer对序列进行预测源代码

Python&#xff0c;Pytorch中构建Transformer进行序列预测源程序。包含所有的源代码和数据&#xff0c;程序能够一键运行。此程序是完整的Transformer&#xff0c;即使用了Encoder、Decoder和Embedding所有模块。源程序是用jupyterLab所写&#xff0c;建议分块运行。也整理了.p…...

编程日记 2024/12/9 4:26:38

生产者-消费者模式：多线程并发协作的经典案例

生产者-消费者模式是多线程并发编程中一个非常经典的模式&#xff0c;它通过解耦生产者和消费者的关系&#xff0c;使得两者可以独立工作&#xff0c;从而提高系统的并发性和可扩展性。本文将详细介绍生产者-消费者模式的概念、实现方式以及应用场景。 1 生产者-消费者模式概述…...

编程日记 2024/12/9 4:25:37

数据库-mysql(基本语句)

演示工具&#xff1a;navicat 连接&#xff1a;mydb 一.操作数据库 1.创建数据库 ①create database 数据库名称 //普通创建 ②create database if not exists 数据库名称 //创建数据库&#xff0c;判断不存在&#xff0c;再创建&#xff1a; 使用指定数据库 use 数据库…...

编程日记 2024/12/9 4:24:36

android12L super.img 解压缩及其挂载到ubuntu18.04

本文介绍如何在Ubuntu18.04上解压缩高通平台Android12L的super.img&#xff0c;并将其挂载到系统中查看内容。 在源码的根目录下&#xff0c;执行如下命令&#xff1a; out/host/linux-x86/bin/simg2img out/target/product/msmnile_gvmq/super.img super.img_rawmkdir super…...

编程日记 2024/12/9 4:21:33

flask简易版的后端服务创建接口(python)

1.pip install安装Flask和CORS 2.创建http_server.py文件，内容如下 """ ============================ 简易版的后端服务 ============================ """ from flask import Flask, request, jsonify from flask_cors import CORS app = F…...

编程日记 2024/12/9 4:18:30

小程序入门学习（四）之全局配置

一、 全局配置文件及常用的配置项 小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下&#xff1a; pages&#xff1a;记录当前小程序所有页面的存放路径 window&#xff1a;全局设置小程序窗口的外观 tabBar&#xff1a;设置小程序底部的 tabBar 效…...

编程日记 2024/12/9 4:17:29

PHP使用RabbitMQ（正常连接与开启SSL验证后的连接）

代码中包含了PHP在一般情况下使用方法和RabbitMQ开启了SSL验证后的使用方法&#xff08;我这边消费队列是使用接口请求的方式&#xff0c;每次只从中取出一条&#xff09; 安装amqp扩展 PHP使用RabbitMQ前&#xff0c;需要安装amqp扩展&#xff0c;之前文章中介绍了Windows环…...

编程日记 2024/12/9 4:16:28

轻量级视觉骨干网络 MobileMamba: Lightweight Multi-Receptive Visual Mamba Network

MobileMamba 快速链接解决问题&#xff1a;视觉模型在移动设备端性能和效果的平衡性解决方法&#xff1a;改进网络结构训练和测试策略网络结构改进训练和测试策略 实验支撑&#xff1a;图像分类、分割&#xff0c;目标检测等图像分类结果对比目标检测和实例分割结果对比语义分割…...

编程日记 2024/12/9 4:15:27

科技云报到：数智化转型风高浪急，天翼云如何助力产业踏浪而行？

科技云报到原创。 捷径消亡&#xff0c;破旧立新&#xff0c;是今年千行百业的共同底色。 穿越产业周期&#xff0c;用数字化的力量重塑企业经营与增长的逻辑&#xff0c;再次成为数字化技术应用的主旋律&#xff0c;也是下一阶段产业投资的重点。 随着数字化转型行至“深水区…...

编程日记 2024/12/9 4:14:25

dockerfile部署前后端(vue+springboot)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言0.环境说明和准备1.前端多环境打包1.1前端多环境设置1.2打包 2.后端项目多环境配置以及打包2.1后端多环境配置2.2项目打包 3.文件上传4.后端镜像制作4.1dockerf…...

编程日记 2024/12/9 4:12:20

c语言的思维导图

之前已经全部学完c语言了&#xff0c;所以为了更好的复习回顾&#xff0c;我做了一份c语言超详细的思维导图&#xff0c;帮助实现一张图就可以复习&#xff0c;避免盲目&#xff0c; 由于平台不支持直接发上图&#xff0c;有想要的小伙伴&#xff0c;可以私信找我要原件...

编程日记 2024/12/9 4:10:17

Android 拍照（有无存储权限两种方案，兼容Q及以上版本）

在某些行业&#xff0c;APP可能被禁止使用存储权限&#xff0c;或公司在写SDK功能&#xff0c;不方便获取权限 所以需要有 无存储权限拍照方案。这里两种方案都列出里。 对于写入权限&#xff0c;在高版本中&#xff0c;已经废弃&#xff0c; 不可用文件写入读取权限&#xf…...

编程日记 2024/12/9 4:07:13

MongoDB在自动化设备上的应用示例

发现MongoDB特别适合自动化检测数据的存储。。。 例如一个晶圆检测项目&#xff0c;定义其数据结构如下 #pragma once #include <vector> #include <QString> #include <QRectF> #include <string> #include <memory>class tpoWafer; class tp…...

编程日记 2024/12/9 4:05:10

draggable插件——实现元素的拖动排序——拖动和不可拖动的两种情况处理

最近在写后台管理系统的时候&#xff0c;遇到一个需求&#xff0c;就是关于拖动排序的功能。 我之前是写过一个关于拖动表格的功能&#xff0c;此功能可以实现表格中的每一行数据上下拖动实现排序的效果。 vue——实现表格的拖拽排序功能——技能提升 但是目前我这边的需求是…...

编程日记 2024/12/9 4:04:09

Redux的使用

到如今redux的已经不是react程序中必须的一部分内容了&#xff0c; 我们应该在本地需要大量更新全局变量时才使用它! redux vs reducer reducer的工作机制&#xff1a; 手动构造action对象传入dispatch函数中 dispatch函数将 action传入reducer当中 reducer结合当前state与a…...

编程日记 2024/12/9 4:02:07

【JAVA】Java高级：多数据源管理与Sharding：数据分片（Sharding）技术的实现与实践

大规模分布式系统&#xff0c;数据存储和管理变得越来越复杂。随着用户数量和数据量的急剧增加&#xff0c;单一数据库往往难以承载如此庞大的负载。这时&#xff0c;数据分片&#xff08;Sharding&#xff09;技术应运而生。数据分片是一种将数据水平切分到多个数据库实例的技…...

编程日记 2024/12/9 4:00:04

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2026/1/13 7:39:19

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2026/2/6 13:01:28

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2026/2/4 20:23:50

Linux 内存管理调试分析：ftrace、perf、crash 的系统化使用

Linux 内存管理调试分析&#xff1a;ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础&#xff0c;但这一子系统结构复杂&#xff0c;常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题&#xff0c;需要一套工具化、…...

编程新知 2026/2/6 1:15:38