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

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

news 2025/7/13 3:20:48

效果图

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

添加功能

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>

//增加
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安装文件。下载地址：MySQL官网进入后点击下面的MySQL社区版下载点击MySQL Comunity Server。我这里选择的是版本8.4.3LTS版本，在线对应的msi文件。点击No thanks,直接下载。二、安装MySQL 2.1、双击刚刚下载好的msi文件，…...

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

MySQL-DDL之数据库操作

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

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

Python 笔记之进程通信

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

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

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

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

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

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

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

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

数据库-mysql(基本语句)

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

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

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

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

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

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 文件是小程序的全局配置文件。常用的配置项如下： pages：记录当前小程序所有页面的存放路径 window：全局设置小程序窗口的外观 tabBar：设置小程序底部的 tabBar 效…...

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

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

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

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

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

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

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

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

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

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

dockerfile部署前后端(vue+springboot)

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

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

c语言的思维导图

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

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

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

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

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

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

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

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

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

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

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

Redux的使用

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

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

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

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

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

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/7/7 9:53:50

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2025/7/11 8:40:45

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2025/7/13 0:55:44

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了估计有） 刷机程序和镜像就不提供了。要刷的时…...

编程新知 2025/7/12 13:01:09

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/7/12 20:21:52

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/7/11 13:24:35