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项目，如…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
PydanticAI快速入门示例
参考链接：https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...
在Zenodo下载文件 用到googlecolab googledrive
方法：Figshare/Zenodo上的数据/文件下载不下来？尝试利用Google Colab ：https://zhuanlan.zhihu.com/p/1898503078782674027 参考： 通过Colab&谷歌云下载Figshare数据，超级实用！！࿰…...
Linux入门(十五)安装java安装tomcat安装dotnet安装mysql
安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了，系统很多命…...
C#最佳实践：为何优先使用as或is而非强制转换
C#最佳实践：为何优先使用as或is而非强制转换 在 C# 的编程世界里，类型转换是我们经常会遇到的操作。就像在现实生活中，我们可能需要把不同形状的物品重新整理归类一样，在代码里，我们也常常需要将一个数据类型转换为另…...