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 两…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
数据库分批入库
今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...
WPF八大法则：告别模态窗口卡顿
⚙️ 核心问题：阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题：…...
DBLP数据库是什么？
DBLP（Digital Bibliography & Library Project）Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高，数据库文献更新速度很快，很好地反映了国际计算机科学学术研…...