JavaScript_动态表格_删除功能
1、动态表格_删除功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>动态表格_添加和删除功能</title><style>table{border: 1px solid;margin: auto;width: 100%;}td,th{text-align: center;border: 1px solid;}div{text-align: center;margin: 50px;}</style> </head> <body><div><input type="text" id="id" placeholder="请输入编号"/><input type="text" id="name" placeholder="请输入姓名"/><input type="text" id="gender" placeholder="请输入性别"/><input type="button" value="添加" id="btn_add" onclick="btn_add"/></div><table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>张三丰</td><td>男</td><td><a href="javascript:void(0)" onclick="delTr(this)">删除</a> </td></tr><tr><td>2</td><td>张翠山</td><td>男</td><td><a href="javascript:void(0)" onclick="delTr(this)">删除</a> </td></tr><tr><td>3</td><td>张无忌</td><td>男</td><td><a href="javascript:void(0)" onclick="delTr(this)">删除</a> </td></tr></table><script>/*** 1、给添加按钮绑定单击事件* 2、获取文本框的内容* 3、创建td，设置td的文本为文本框的内容* 4、创建tr* 5、将td添加到tr中* 6、获取table，将tr添加到table中*///1、获取按钮document.getElementById("btn_add").onclick = function () {//2、获取文本框的内容let id = document.getElementById("id").value;let name = document.getElementById("name").value;let gender = document.getElementById("gender").value;//3.创建td，赋值td的标签体//id的tdlet td_id = document.createElement("td");let text_id = document.createTextNode(id);td_id.appendChild(text_id);//name的tdlet td_name = document.createElement("td");let text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender的tdlet td_gender = document.createElement("td");let text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);//a标签的tdlet td_a = document.createElement("td");let ele_a = document.createElement("a");ele_a.setAttribute("href", "javascript:void(0)");ele_a.setAttribute("onclick", "delTr(this)");let text_a = document.createTextNode("删除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);//4、创建trlet tr = document.createElement("tr");//5、添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6、获取tablelet table = document.getElementsByTagName("table")[0];table.appendChild(tr);};//删除方法function delTr(obj) {let table = obj.parentNode.parentNode.parentNode;let tr = obj.parentNode.parentNode;table.removeChild(tr);}</script></body> </html>2、delTr
// 定义删除指定tr标签的函数 function delTr(obj) {// 获取包含要删除的tr标签的table标签 let table = obj.parentNode.parentNode.parentNode;// 获取要删除的tr标签let tr = obj.parentNode.parentNode;// 从table标签中移除tr标签table.removeChild(tr); } //这段HTML函数用于删除一个特定的tr元素，它首先通过obj获取到包含该元素的table元素，然后获取到要删除的tr元素，并从table中移除该tr元素。
在JS中，parentNode是一个DOM属性，代表当前节点的父节点。也就是说，每个节点（除了根节点）都有父节点，parentNode可以用来访问这个父节点。例如，如果element是一个DOM元素节点，那么element.parentNode就是它的父元素节点。
在JavaScript中，parentNode是一个DOM节点属性，它表示当前节点的父节点。换句话说，它存储了当前节点的直接父元素，可以通过该属性访问该节点的父级元素。例如，如果要访问某个元素的父元素，可以使用以下代码：
var parentElement = element.parentNode;其中，element是要查找其父元素的元素。
相关文章：
JavaScript_动态表格_删除功能
1、动态表格_删除功能 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>动态表格_添加和删除功能</title><style>table{border: 1px solid;margin: auto;width: 100%;}td,th{text-align: …...
一步一步开发微信小程序（Django+Mysql）
前提：假设你已经安装好Anaconda，微信开发者工具，MySQL数据库，IDE等工具 工具下载地址： Anaconda：https://www.anaconda.com/download MySQL：https://dev.mysql.com/downloads/mysql/ 微信开…...
mysql 讲解(1)
文章目录 前言一、基本的命令行操作二、操作数据库语句2.1、创建数据库2.2、删除数据库2.3、使用数据库2.4 查看所有数据库 三、列的数据类型3.1 字符串3.2 数值3.3 时间日期3.4 空3.5 int 和 varchar问题总结： 四、字段属性4.1 UnSigned4.2 ZEROFILL4.3 Auto_InCre…...
k8s关于metadata、spec.containers、spec.volumes的属性介绍（yaml格式）
目录 一.metadata常用属性 二.spec.containers子属性介绍 explain pod.spec.containers给出的参考 1.command示例演示 2.env和envFrom示例演示 3.ports部分详解 4.resources部分详解 5.startupProbe格式演示 6.terminationMessagePath和terminationMessagePolicy格式演…...
腾讯域名优惠卷领取
腾讯域名到到期了，听说申请此计划，可获得优惠卷，看到网上5年域名只需要10元，姑且试试看。 我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?in…...
elastic-job 完结篇
一 elastic-job 1.1 案例场景分析 1.设置4个分片，10秒执行一次。 分片弹性扩容缩容机制测试： 测试1：测试窗口1不关闭，再次运行main方法查看控制台日志，注意修改application.properties中的 server.port…...
基于 Gin 的 HTTP 代理 demo
上次用 TCP 模拟了一个 HTTP 代理之后，感觉那样还是太简陋了，想着是不是可以用框架来做一个有点实际用处的东西。所以，就思索如何用 golang 的 Gin 框架来实现一个？嗯，对的你没有听错，是 gin 框架。你可能会…...
【ATTCK】MITRE Caldera - 测试数据泄露技巧
CALDERA是一个由python语言编写的红蓝对抗工具（攻击模拟工具）。它是MITRE公司发起的一个研究项目，该工具的攻击流程是建立在ATT&CK攻击行为模型和知识库之上的，能够较真实地APT攻击行为模式。 通过CALDERA工具，安全…...
【数据结构】树与二叉树（十二）：二叉树的递归创建（算法CBT）
文章目录 5.2.1 二叉树二叉树性质引理5.1：二叉树中层数为i的结点至多有 2 i 2^i 2i个，其中 i ≥ 0 i \geq 0 i≥0。引理5.2：高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点，其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…...
Qt绘制网格和曲线
绘制网格： void Widget::drawGrid(QPainter &p, QRect &windRect) {QRect rect(windRect.left()m_margins.left(),windRect.top()m_margins.top(),windRect.width()-m_margins.left()-m_margins.right(),windRect.height()-m_margins.top()-m_margins.bo…...
2023-11-12
今日比较摆烂, 但是把自写管道的原理搞懂了, 主要是把 exp 完完全全看懂了, 还不错. 然后就没干啥了. 明日计划: 学校的作业. AFL 源码. 我真是服了我自己了, AFL 源码搁多久了, 操操操 然后把 seccomp 重新学习下...
[工业自动化-16]：西门子S7-15xxx编程 - 软件编程 - 西门子仿真软件PLCSIM
目录 前言： 一、PLCSIM仿真软件 1.1 PLCSIM仿真软件基础版（内嵌） 1.2 PLCSIM仿真软件与PLCSIM仿真软件高级版的区别？ 1.3 PLCSIM使用 前言： PLC集成开发环境是运行在Host主机上，Host主机与PLC可以通过…...
运行npm install卡住不动的几种解决方案
在前端开发经常会遇到运行npm install 来安装工具包一直卡住不动，为此这里提供几种解决方案，供大家参考学习，不足之处还请指正。 第一种方案、首先检查npm代理，是否已经使用国内镜像 // 执行以下命令查看是否为国内镜像 npm con…...
[Android]_[初级]_[配置gradle的环境变量设置安装位置]
场景 在开发Android项目的时候, gradle是官方指定的构建工具。不同项目通过wrapper指定不同版本的gradle。随着项目越来越多，使用的gradle版本也增多，导致它以来的各种库也增加，系统盘空间不足，怎么解决？ 说明 grad…...
docker更改存储目录原因及方案
为什么一定要将docker的存储目录挂载到其他目录 docker在安装时默认存储目录在/var/lib/docker，而该目录是在系统盘下的。docker安装后，会使用各种各样的镜像，动辄几个G，那么如此多的镜像文件，装着装着系统盘就撑爆了…...
HTTPS的工作流程
. HTTPS是什么？ https是应用层中的一个协议，是在http协议的基础上引入的一个加密层。 为什么需要HTTPS 由于http协议内容都是按照文本的方式明文传输的，这就导致传输过程中会出现一些被篡改的情况。运营商劫持事件最开始百度，…...
C++语言的广泛应用领域
目录 1. 系统级编程 2. 游戏开发 3. 嵌入式系统 4. 大数据处理 5. 金融和量化分析 6. 人工智能和机器学习 7. 网络和通信 结语 C是一种多范式编程语言，具有高性能、中级抽象能力和面向对象的特性。由Bjarne Stroustrup于1979年首次设计并实现，C在…...
Lambertian模型（完美漫反射）
这里使用相乘的方式组合光照色和纹理色。根据这个模型,面朝光源的区域光照强度高,纹理色也相应增强。面背光源的区域光照弱,纹理色也被抑制。这样通过光照和纹理的结合,可以合成出具有照明效果的面部颜色,而不仅仅是固定的纹理本身的颜色。相乘方式可以近似实现不同光照方向下面…...
MATLAB的编程与应用，匿名函数、嵌套函数、蒙特卡洛法的掌握与使用
目录 1.匿名函数 1.1.匿名函数的定义与分类 1.2.匿名函数在积分和优化中应用 2.嵌套函数 2.1.嵌套函数的定义与分类 2.2.嵌套函数彼此调用关系 2.3.嵌套函数在积分和微分中应用 3.微分和积分 4.蒙特卡洛法 4.1.圆周率的模拟 4.2.计算N重积分（均匀分布&am…...
NFS服务器的搭建
架设一台NFS服务器，并按照以下要求配置 准备阶段：准备两台虚拟机，一台作为服务端，一台作为客户端 服务端（Server）：192.168.75.139 客户端（Client）:192.168.75.160 两…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库，提供了高效、安全的文本格式化功能，是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全：…...
：工厂方法模式、单例模式和生成器模式)
上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中，合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式：工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...