HTML学习笔记（6）
利用dom操作实现，对一个表格的增删改查
代码如下：
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><link rel="stylesheet" href="todolist.css"><script src="todolist.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></tbody></table></div>
</body>
</html>todolist.js
// 获取添加按钮
var btn = document.querySelector(".btn")
console.log(btn)// 获取输入框
var content = document.querySelector(".content")// 获取tbbody
var tbody = document.querySelector("tbody")// 定义标识
var flag = 1//修改存储的是哪条信息
var targetFlag = 0// 给添加按钮绑事件
btn.onclick = function(){if(btn.value == "修改") {var tds = document.querySelectorAll("tbody tr td:nth-child(1)")for(var i = 0; i < tds.length; i ++ ){if(tds[i].getAttribute("index") == targetFlag){tds[i].innerHTML = content.valuecontent.value=""btn.value = "添加"}}return}var text = content.value.trim() // trim去掉前后的空格if(text.length != 0){var tr = document.createElement("tr")var td1 = document.createElement("td")td1.setAttribute("index", flag)flag ++;td1.innerText = textvar td2 = document.createElement("td")td2.innerHTML = '<input type="button" value="完成" class="finish"><input type="button" value="删除" class="delete"><input type="button" value="修改" class="update"></input>'tr.append(td1)tr.append(td2)tbody.append(tr)content.value = "" //去掉输入框内的值} else {alert("请输入信息")}// 给完成按钮绑定事件var finish = document.getElementsByClassName("finish")for(var i = 0; i < finish.length; i ++ ){finish[i].onclick = function(){var target = this.parentNode.previousElementSiblingif(target.style.textDecoration == "line-through") {target.style.textDecoration = "none"target.style.color = "#000"this.value = "完成"this.style.borderColor = "#910000"this.style.color = "#910000" } else {target.style.textDecoration = "line-through"target.style.color = "#888"this.value = "恢复"this.style.borderColor = "#888"this.style.color = "#888"}}}var deleteBtn = document.getElementsByClassName("delete")for(var i = 0; i < deleteBtn.length; i ++ ){deleteBtn[i].onclick = function(){if(this.parentNode.previousElementSibling.style.textDecoration == "line-through") {if(confirm("确定要删除吗？")){var target = this.parentNode.parentNodetbody.removeChild(target)}} else {alert("努力完成吧")}}}var update = document.getElementsByClassName("update")for(var i = 0; i < update.length; i ++ ){update[i].onclick = function(){var target = this.parentNode.previousElementSiblingif(target.style.textDecoration == "line-through"){alert("已经完成辣，无需修改")content.value = ""btn.value = "添加"} else {content.value = target.innerTextbtn.value = "修改"targetFlag = target.getAttribute("index")}}}
}todolist.css
* {padding: 0;margin: 0;
}.container {width: 25%;margin: 150px auto;min-width: 200px;
}.top {display: flex;
}.top .content {width: 80%;border: 1px solid #910000;padding: 5px;/* 外轮廓去掉 */outline: none;border-radius: 5px 0 0 5px;
}.top .btn {width: 20%;border: 1px solid #910000;background: #910000;color: #fff;padding: 5px;border-radius: 0 5px 5px 0;cursor: pointer;
}.top .btn:hover {box-shadow: 1px 1px 3px #910000;
}table {/* 设置表格边框是否合并collapse相邻的单元格共用一个边框 separate */border-collapse: collapse;width: 100%;margin-top: 30px;text-align: center;border: 1px solid #fff;
}table thead tr {background: #910000;color: #fff;
}table thead tr th {padding: 5px;font-size: 14px;
}table tbody tr {background: #eee;font-size: 13px;
}table tbody tr td {padding: 5px;
}table tbody tr:nth-child(odd) {background: #ddd;
}table tbody tr td input {background: none;border: 1px solid #910000;padding: 2px 5px;font-size: 13px;color: #910000;/* 鼠标样式 */cursor: pointer;
}table tbody tr td input:hover {box-shadow: 1px 1px 3px #910000;
}相关文章：
HTML学习笔记（6）
利用dom操作实现，对一个表格的增删改查 代码如下： todolist.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …...
走向基于大语言模型的新一代推荐系统：综述与展望
HightLight 论文题目：Towards Next-Generation LLM-based Recommender Systems: A Survey and Beyond作者机构：吉林大学、香港理工大学、悉尼科技大学、Meta AI论文地址： https://arxiv.org/abs/2410.1974 基于大语言模型的下一代推荐系统&…...
【DeepSeek-R1 +1.5B】2060显卡ollama本地部署+open-webui界面使用
https://github.com/open-webui/open-webui Deepseek开源R1系列模型，纯RL助力推理能力大跃升！ 2060显卡下使用deepseek-r1-1.5B deepseek开源小模型需要的显存（根据显存来选模型大小） ，图from: DeepSeek本地部署&…...
《翻转组件库之发布》
背景 继《翻转组件库之打包》_杨晓风-linda的博客-CSDN博客之后，组件库已经可以正常构建，那如何像elementUI等组件库那样，用npm安装，按照既定的用法使用即可呢？本篇便为你揭晓 资料相关 1、npm官方文档：…...
在深度学习中，样本不均衡问题是一个常见的挑战，尤其是在你的老虎机任务中，某些的中奖倍数较高
在深度学习中，样本不均衡问题是一个常见的挑战，尤其是在你的老虎机任务中，某些的中奖倍数较高 在深度学习中，样本不均衡问题是一个常见的挑战，尤其是在你的老虎机任务中，某些的中奖倍数较高而其他的中奖倍数较低。这种不均衡会导致模型偏向于高频样本（低中奖倍数的），…...
语言月赛 202311【基因】题解（AC）
》》》点我查看「视频」详解》》》 [语言月赛 202311] 基因 题目描述 有一个长度为 n n n 的字符串 S S S。其只包含有大写字母。 小 A 将 S S S 进行翻转后，得到另一个字符串 S ′ S S′。两个字符串 S S S 与 S ′ S S′ 对应配对。例如说，对…...
unity学习26：用Input接口去监测: 鼠标，键盘，虚拟轴，虚拟按键
目录 1 用Input接口去监测：鼠标，键盘，虚拟轴，虚拟按键 2 鼠标 MouseButton 事件 2.1 鼠标的基本操作 2.2 测试代码 2.3 测试情况 3 键盘Key事件 3.1 键盘的枚举方式 3.2 测试代码同上 3.3 测试代码同上 3.4 测试结果 4…...
GB/T 43698-2024 《网络安全技术 软件供应链安全要求》标准解读
一、43698-2024标准图解 https://mmbiz.qpic.cn/sz_mmbiz_png/rwcfRwCticvgeBPR8TWIPywUP8nGp4IMFwwrxAHMZ9Enfp3wibNxnfichT5zs7rh2FxTZWMxz0je9TZSqQ0lNZ7lQ/640?wx_fmtpng&fromappmsg 标准在线预览： 国家标准|GB/T 43698-2024 相关标准： &a…...
ASP.NET Core与EF Core的集成
目录 分层项目中EF Core的用法 数据库的配置 数据库迁移 步骤汇总 注意： 批量注册上下文 分层项目中EF Core的用法 创建一个.NET类库项目BooksEFCore，放实体等类。NuGet：Microsoft.EntityFrameworkCore.RelationalBooksEFCore中增加实…...
【AI大模型】Ubuntu18.04安装deepseek-r1模型+服务器部署+内网访问
以下内容主要参考博文：DeepSeek火爆全网，官网宕机？本地部署一个随便玩「LLM探索」 - 程序设计实验室 - 博客园 安装 ollama Download Ollama on Linux curl -fsSL https://ollama.com/install.sh | sh 配置 ollama 监听地址 ollama 安装后…...
SpringAI系列 - 使用LangGPT编写高质量的Prompt
目录 一、LangGPT —— 人人都可编写高质量 Prompt二、快速上手2.1 诗人 三、Role 模板3.1 Role 模板3.2 Role 模板使用步骤3.3 更多例子 四、高级用法4.1 变量4.2 命令4.3 Reminder4.4 条件语句4.5 Json or Yaml 方便程序开发 一、LangGPT —— 人人都可编写高质量 Prompt La…...
Github - 记录一次对“不小心包含了密码的PR”的修复
Github - 记录一次对“不小心包含了密码的PR”的修复 前言 和好朋友一起开发一个字节跳动青训营抖音电商后端(now private)的项目，某大佬不小心把本地一密码commit上去并提了PR。 PR一旦发出则无法被删除，且其包含的commit也能被所有能看到这个仓库的…...
【玩转 Postman 接口测试与开发2_014】第11章：测试现成的 API 接口（下）——自动化接口测试脚本实战演练 + 测试集合共享
《API Testing and Development with Postman》最新第二版封面 文章目录 3 接口自动化测试实战3.1 测试环境的改造3.2 对列表查询接口的测试3.3 对查询单个实例的测试3.4 对新增接口的测试3.5 对修改接口的测试3.6 对删除接口的测试 4 测试集合的共享操作4.1 分享 Postman 集合…...
前后端通过docker部署笔记
项目背景：这是一个SpringBootvue3的项目，通过maven打包后，需要在Linux服务器上部署，本篇博客主要记录docker-compose.yaml文件的含义： docker-compose.yml 文件中定义了一个 algorithm_platform_frontend 容器&#…...
五十天精通硬件设计第四天-场效应管知识及选型
场效应管（FET，Field-Effect Transistor）是一种利用电场效应控制电流的半导体器件，广泛应用于放大、开关等电路中。以下是场效应管的基本知识及选型要点： 一、场效应管的基本知识 1. 类型： - **结型场效应管（JFET）**： - N沟道和P沟道两种类型。 - 栅极与…...
了解 ALV 中的 field catalog （ABAP List Viewer）
在 ABAP 中，字段目录是使用 ALV （ABAP List Viewer） 定义内部表中的数据显示方式的关键元素。它提供对 ALV 中显示的字段的各种属性的控制，例如列标题、对齐方式、可见性、可编辑性等。关键概念： Field Catelog 字段目…...
【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料
🧸安清h：个人主页 🎥个人专栏：【Spring篇】【计算机网络】【Mybatis篇】 🚦作者简介：一个有趣爱睡觉的intp，期待和更多人分享自己所学知识的真诚大学生。 目录 🎃1.修改密码 -持久…...
十一、CentOS Stream 9 安装 Docker
一、Docker 环境安装 1、软件源(仓库)信息 使用如下命令可列出当前系统配置的所有软件源(仓库)信息 # 列出所有软件源 dnf repolist 这表明系统有三个仓库 AppStream 、 BaseOS、Extras-Common 被启用 2、配置软件源镜像 使用如下命令可配置 Docker 软件包下载的镜像地址 …...
FreeRTOS学习 --- 中断管理
什么是中断？ 让CPU打断正常运行的程序，转而去处理紧急的事件（程序），就叫中断 中断执行机制，可简单概括为三步： 1，中断请求 外设产生中断请求（GPIO外部中断、定时器中断…...
如何在Intellij IDEA中识别一个文件夹下的多个Maven module？
目录 问题描述 理想情况 手动添加Module，配置Intellij IDEA的Project Structure 问题描述 一个文件夹下有多个Maven项目，一个一个开窗口打开可行但是太麻烦。直接open整个文件夹会发现Intellij IDEA默认可能就识别一个或者几个Maven项目，如…...
pgwatch2监控指标详解：从基础性能到高级洞察
pgwatch2监控指标详解：从基础性能到高级洞察 【免费下载链接】pgwatch2 PostgreSQL metrics monitor/dashboard 项目地址: https://gitcode.com/gh_mirrors/pg/pgwatch2 pgwatch2是一款功能强大的PostgreSQL metrics monitor/dashboard工具，它能够…...
基于FET6254-C多核异构处理器的智能运动控制系统设计与实践
1. 项目概述：当运动控制遇上嵌入式智能最近在做一个智能运动控制的项目，从传统的PLC方案转向了更灵活、更智能的嵌入式平台。选型过程中，飞凌嵌入式的FET6254-C核心板进入了我的视野，经过一番深度评估和实际测试，它确实…...
如何高效下载30+文档平台资源：kill-doc文档下载工具完整指南
如何高效下载30文档平台资源：kill-doc文档下载工具完整指南 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档，但是相关网站浏览体验不好各种广告，各种登录验证，需要很多步骤才能下载文档，该脚本就是…...
对比按需计费与Token Plan在长期项目中的成本差异
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 对比按需计费与Token Plan在长期项目中的成本差异 在构建基于大模型的应用时，成本是项目规划中一个重要的考量因素。对…...
容器化自动化数据抓取平台OpenClaw-Compose部署与实战指南
1. 项目概述：一个容器化的开源自动化抓取与处理平台最近在折腾一个自动化数据抓取和处理的项目，发现了一个挺有意思的GitHub仓库：alexleach/openclaw-compose。乍一看标题，你可能会觉得这又是一个普通的Docker Compose编排文件集合…...
告别电脑“飞机起飞“噪音：FanControl风扇控制终极指南
告别电脑"飞机起飞"噪音：FanControl风扇控制终极指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tr…...
电商客服机器人如何通过 Taotoken 动态选择性价比最优的模型
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 电商客服机器人如何通过 Taotoken 动态选择性价比最优的模型 在电商客服场景中，用户咨询的问题复杂度差异巨大。从简单…...
TI毫米波雷达IWR/AWR1642 L3 RAM内存优化实战：从原理到配置
1. 项目概述：为何要动L3 RAM这块“蛋糕”？如果你正在基于TI的IWR1642或AWR1642毫米波雷达芯片进行开发，尤其是当你的应用代码量越来越大，或者数据处理任务越来越重时，你可能会遇到一个瓶颈：内存不够用了。不…...
保姆级教程：从NCBI下载序列到MEGA7构建进化树（附拟南芥SPL15基因实战）
生物信息学实战：从基因检索到进化树构建的全流程解析 在分子生物学研究中，系统进化分析是理解基因家族演化关系的重要工具。对于刚接触生物信息学的学生来说，从零开始完成一个完整的进化树分析项目往往面临诸多挑战——如何获取目标基因序列…...
Ubuntu 20.04上virt-manager报GDBus错误？别慌，三步排查法搞定它
Ubuntu 20.04 virt-manager报GDBus错误的深度排查指南 当你正准备用virt-manager管理KVM虚拟机时，突然弹出一个令人困惑的GDBus错误——这种场景对于Linux虚拟化用户来说并不陌生。这个看似简单的错误背后，其实涉及Linux桌面环境中多个关键组件的协同工作…...