JavaScript中todolist操作--待办事项的添加 删除 完成功能
效果图
在文本框中输入内容点击添加按钮会在下面生成
添加功能
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…...
Windows中MySQL8.3.4 MSI版本——详细安装教程
一、下载MySQL安装文件。 下载地址：MySQL官网 进入后点击下面的MySQL社区版下载 点击MySQL Comunity Server。 我这里选择的是版本8.4.3LTS版本，在线对应的msi文件。 点击No thanks,直接下载。 二、安装MySQL 2.1、双击刚刚下载好的msi文件，…...
MySQL-DDL之数据库操作
文章目录 一. 创建数据库1. 直接创建数据库，如果存在则报错2. 如果数据库不存在则创建3. 创建数据库时设置字符集4. 栗子 二. 查看数据库1. 查看数据库 三. 删除数据库1. 删除数据库 四. 使用数据库1. 使用数据库2. 查看正在使用的数据库 数据定义语言：简…...
Python 笔记之进程通信
当需要创建的子进程数量不多时，可以直接利用multiprocessing中的Process动态生成多个进程 但是如果是上百个或者上千个目标，手动去创建进程的工作量很大，此时就可以利用到Multiprocessing模块提供的Pool方法 初始化pool时，可以指定…...
【Transformer序列预测】Pytorch中构建Transformer对序列进行预测源代码
Python，Pytorch中构建Transformer进行序列预测源程序。包含所有的源代码和数据，程序能够一键运行。此程序是完整的Transformer，即使用了Encoder、Decoder和Embedding所有模块。源程序是用jupyterLab所写，建议分块运行。也整理了.p…...
生产者-消费者模式：多线程并发协作的经典案例
生产者-消费者模式是多线程并发编程中一个非常经典的模式，它通过解耦生产者和消费者的关系，使得两者可以独立工作，从而提高系统的并发性和可扩展性。本文将详细介绍生产者-消费者模式的概念、实现方式以及应用场景。 1 生产者-消费者模式概述…...
数据库-mysql(基本语句)
演示工具：navicat 连接：mydb 一.操作数据库 1.创建数据库 ①create database 数据库名称 //普通创建 ②create database if not exists 数据库名称 //创建数据库，判断不存在，再创建： 使用指定数据库 use 数据库…...
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…...
)
flask简易版的后端服务创建接口(python)
1.pip install安装Flask和CORS 2.创建http_server.py文件，内容如下 """ ============================ 简易版的后端服务 ============================ """ from flask import Flask, request, jsonify from flask_cors import CORS app = F…...
小程序入门学习（四）之全局配置
一、 全局配置文件及常用的配置项 小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下： pages：记录当前小程序所有页面的存放路径 window：全局设置小程序窗口的外观 tabBar：设置小程序底部的 tabBar 效…...
PHP使用RabbitMQ（正常连接与开启SSL验证后的连接）
代码中包含了PHP在一般情况下使用方法和RabbitMQ开启了SSL验证后的使用方法（我这边消费队列是使用接口请求的方式，每次只从中取出一条） 安装amqp扩展 PHP使用RabbitMQ前，需要安装amqp扩展，之前文章中介绍了Windows环…...
轻量级视觉骨干网络 MobileMamba: Lightweight Multi-Receptive Visual Mamba Network
MobileMamba 快速链接解决问题：视觉模型在移动设备端性能和效果的平衡性解决方法：改进网络结构训练和测试策略网络结构改进训练和测试策略 实验支撑：图像分类、分割，目标检测等图像分类结果对比目标检测和实例分割结果对比语义分割…...
科技云报到：数智化转型风高浪急，天翼云如何助力产业踏浪而行？
科技云报到原创。 捷径消亡，破旧立新，是今年千行百业的共同底色。 穿越产业周期，用数字化的力量重塑企业经营与增长的逻辑，再次成为数字化技术应用的主旋律，也是下一阶段产业投资的重点。 随着数字化转型行至“深水区…...
dockerfile部署前后端(vue+springboot)
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言0.环境说明和准备1.前端多环境打包1.1前端多环境设置1.2打包 2.后端项目多环境配置以及打包2.1后端多环境配置2.2项目打包 3.文件上传4.后端镜像制作4.1dockerf…...
c语言的思维导图
之前已经全部学完c语言了，所以为了更好的复习回顾，我做了一份c语言超详细的思维导图，帮助实现一张图就可以复习，避免盲目， 由于平台不支持直接发上图，有想要的小伙伴，可以私信找我要原件...
Android 拍照（有无存储权限两种方案，兼容Q及以上版本）
在某些行业，APP可能被禁止使用存储权限，或公司在写SDK功能，不方便获取权限 所以需要有 无存储权限拍照方案。这里两种方案都列出里。 对于写入权限，在高版本中，已经废弃， 不可用文件写入读取权限…...
MongoDB在自动化设备上的应用示例
发现MongoDB特别适合自动化检测数据的存储。。。 例如一个晶圆检测项目，定义其数据结构如下 #pragma once #include <vector> #include <QString> #include <QRectF> #include <string> #include <memory>class tpoWafer; class tp…...
draggable插件——实现元素的拖动排序——拖动和不可拖动的两种情况处理
最近在写后台管理系统的时候，遇到一个需求，就是关于拖动排序的功能。 我之前是写过一个关于拖动表格的功能，此功能可以实现表格中的每一行数据上下拖动实现排序的效果。 vue——实现表格的拖拽排序功能——技能提升 但是目前我这边的需求是…...
Redux的使用
到如今redux的已经不是react程序中必须的一部分内容了， 我们应该在本地需要大量更新全局变量时才使用它! redux vs reducer reducer的工作机制： 手动构造action对象传入dispatch函数中 dispatch函数将 action传入reducer当中 reducer结合当前state与a…...
【JAVA】Java高级：多数据源管理与Sharding：数据分片（Sharding）技术的实现与实践
大规模分布式系统，数据存储和管理变得越来越复杂。随着用户数量和数据量的急剧增加，单一数据库往往难以承载如此庞大的负载。这时，数据分片（Sharding）技术应运而生。数据分片是一种将数据水平切分到多个数据库实例的技…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
Linux 内存管理实战精讲：核心原理与面试常考点全解析
Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...
ubuntu22.04 安装docker 和docker-compose
首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...
职坐标物联网全栈开发全流程解析
物联网全栈开发涵盖从物理设备到上层应用的完整技术链路，其核心流程可归纳为四大模块：感知层数据采集、网络层协议交互、平台层资源管理及应用层功能实现。每个模块的技术选型与实现方式直接影响系统性能与扩展性，例如传感器选型需平衡精度与…...