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

HTML学习笔记（6）

news 2025/12/30 19:31:47

利用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操作实现&#xff0c;对一个表格的增删改查 代码如下&#xff1a; todolist.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …...

编程日记 2025/2/7 22:49:23

走向基于大语言模型的新一代推荐系统：综述与展望

HightLight 论文题目&#xff1a;Towards Next-Generation LLM-based Recommender Systems: A Survey and Beyond作者机构&#xff1a;吉林大学、香港理工大学、悉尼科技大学、Meta AI论文地址&#xff1a; https://arxiv.org/abs/2410.1974 基于大语言模型的下一代推荐系统&…...

编程日记 2025/2/7 22:47:20

【DeepSeek-R1 +1.5B】2060显卡ollama本地部署+open-webui界面使用

https://github.com/open-webui/open-webui Deepseek开源R1系列模型&#xff0c;纯RL助力推理能力大跃升&#xff01; 2060显卡下使用deepseek-r1-1.5B deepseek开源小模型需要的显存&#xff08;根据显存来选模型大小&#xff09; &#xff0c;图from: DeepSeek本地部署&…...

编程日记 2025/2/7 22:45:18

《翻转组件库之发布》

背景 继《翻转组件库之打包》_杨晓风-linda的博客-CSDN博客之后&#xff0c;组件库已经可以正常构建&#xff0c;那如何像elementUI等组件库那样&#xff0c;用npm安装&#xff0c;按照既定的用法使用即可呢&#xff1f;本篇便为你揭晓 资料相关 1、npm官方文档&#xff1a;…...

编程日记 2025/2/7 22:39:04

在深度学习中，样本不均衡问题是一个常见的挑战，尤其是在你的老虎机任务中，某些的中奖倍数较高

在深度学习中，样本不均衡问题是一个常见的挑战，尤其是在你的老虎机任务中，某些的中奖倍数较高 在深度学习中，样本不均衡问题是一个常见的挑战，尤其是在你的老虎机任务中，某些的中奖倍数较高而其他的中奖倍数较低。这种不均衡会导致模型偏向于高频样本（低中奖倍数的），…...

编程日记 2025/2/7 22:37:57

语言月赛 202311【基因】题解（AC）

》》》点我查看「视频」详解》》》 [语言月赛 202311] 基因 题目描述 有一个长度为 n n n 的字符串 S S S。其只包含有大写字母。 小 A 将 S S S 进行翻转后&#xff0c;得到另一个字符串 S ′ S S′。两个字符串 S S S 与 S ′ S S′ 对应配对。例如说&#xff0c;对…...

编程日记 2025/2/7 22:36:51

unity学习26：用Input接口去监测: 鼠标，键盘，虚拟轴，虚拟按键

目录 1 用Input接口去监测&#xff1a;鼠标&#xff0c;键盘&#xff0c;虚拟轴&#xff0c;虚拟按键 2 鼠标 MouseButton 事件 2.1 鼠标的基本操作 2.2 测试代码 2.3 测试情况 3 键盘Key事件 3.1 键盘的枚举方式 3.2 测试代码同上 3.3 测试代码同上 3.4 测试结果 4…...

编程日记 2025/2/7 22:32:37

GB/T 43698-2024 《网络安全技术 软件供应链安全要求》标准解读

一、43698-2024标准图解 https://mmbiz.qpic.cn/sz_mmbiz_png/rwcfRwCticvgeBPR8TWIPywUP8nGp4IMFwwrxAHMZ9Enfp3wibNxnfichT5zs7rh2FxTZWMxz0je9TZSqQ0lNZ7lQ/640?wx_fmtpng&fromappmsg 标准在线预览&#xff1a; 国家标准|GB/T 43698-2024 相关标准&#xff1a; &a…...

编程日记 2025/2/7 22:31:34

ASP.NET Core与EF Core的集成

目录 分层项目中EF Core的用法 数据库的配置 数据库迁移 步骤汇总 注意&#xff1a; 批量注册上下文 分层项目中EF Core的用法 创建一个.NET类库项目BooksEFCore&#xff0c;放实体等类。NuGet&#xff1a;Microsoft.EntityFrameworkCore.RelationalBooksEFCore中增加实…...

编程日记 2025/2/7 22:30:32

【AI大模型】Ubuntu18.04安装deepseek-r1模型+服务器部署+内网访问

以下内容主要参考博文&#xff1a;DeepSeek火爆全网&#xff0c;官网宕机&#xff1f;本地部署一个随便玩「LLM探索」 - 程序设计实验室 - 博客园 安装 ollama Download Ollama on Linux curl -fsSL https://ollama.com/install.sh | sh 配置 ollama 监听地址 ollama 安装后…...

编程日记 2025/2/7 22:29:27

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…...

编程日记 2025/2/7 22:28:16

Github - 记录一次对“不小心包含了密码的PR”的修复

Github - 记录一次对“不小心包含了密码的PR”的修复 前言 和好朋友一起开发一个字节跳动青训营抖音电商后端(now private)的项目&#xff0c;某大佬不小心把本地一密码commit上去并提了PR。 PR一旦发出则无法被删除&#xff0c;且其包含的commit也能被所有能看到这个仓库的…...

编程日记 2025/2/7 22:26:11

【玩转 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 集合…...

编程日记 2025/2/7 22:25:07

前后端通过docker部署笔记

项目背景&#xff1a;这是一个SpringBootvue3的项目&#xff0c;通过maven打包后&#xff0c;需要在Linux服务器上部署&#xff0c;本篇博客主要记录docker-compose.yaml文件的含义&#xff1a; docker-compose.yml 文件中定义了一个 algorithm_platform_frontend 容器&#…...

编程日记 2025/2/7 22:23:59

五十天精通硬件设计第四天-场效应管知识及选型

场效应管（FET，Field-Effect Transistor）是一种利用电场效应控制电流的半导体器件，广泛应用于放大、开关等电路中。以下是场效应管的基本知识及选型要点： 一、场效应管的基本知识 1. 类型： - **结型场效应管（JFET）**： - N沟道和P沟道两种类型。 - 栅极与…...

编程日记 2025/2/7 22:22:55

了解 ALV 中的 field catalog （ABAP List Viewer）

在 ABAP 中&#xff0c;字段目录是使用 ALV &#xff08;ABAP List Viewer&#xff09; 定义内部表中的数据显示方式的关键元素。它提供对 ALV 中显示的字段的各种属性的控制&#xff0c;例如列标题、对齐方式、可见性、可编辑性等。关键概念&#xff1a; Field Catelog 字段目…...

编程日记 2025/2/7 22:13:43

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【Spring篇】【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f383;1.修改密码 -持久…...

编程日记 2025/2/7 22:10:36

十一、CentOS Stream 9 安装 Docker

一、Docker 环境安装 1、软件源(仓库)信息 使用如下命令可列出当前系统配置的所有软件源(仓库)信息 # 列出所有软件源 dnf repolist 这表明系统有三个仓库 AppStream 、 BaseOS、Extras-Common 被启用 2、配置软件源镜像 使用如下命令可配置 Docker 软件包下载的镜像地址 …...

编程日记 2025/2/7 22:09:31

FreeRTOS学习 --- 中断管理

什么是中断&#xff1f; 让CPU打断正常运行的程序&#xff0c;转而去处理紧急的事件&#xff08;程序&#xff09;&#xff0c;就叫中断 中断执行机制&#xff0c;可简单概括为三步&#xff1a; 1&#xff0c;中断请求 外设产生中断请求&#xff08;GPIO外部中断、定时器中断…...

编程日记 2025/2/7 22:07:23

如何在Intellij IDEA中识别一个文件夹下的多个Maven module？

目录 问题描述 理想情况 手动添加Module&#xff0c;配置Intellij IDEA的Project Structure 问题描述 一个文件夹下有多个Maven项目&#xff0c;一个一个开窗口打开可行但是太麻烦。直接open整个文件夹会发现Intellij IDEA默认可能就识别一个或者几个Maven项目&#xff0c;如…...

编程日记 2025/2/7 21:59:10

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/12/28 18:01:50

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/12/21 2:20:57

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/12/28 14:17:40

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/12/26 6:03:19

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/12/26 23:36:09

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/12/30 6:37:34

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/12/24 1:07:27

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21