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

JavaScript_动态表格_删除功能

news 2026/4/10 10:19:37

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

编程日记 2023/11/13 1:34:21

一步一步开发微信小程序（Django+Mysql）

前提&#xff1a;假设你已经安装好Anaconda&#xff0c;微信开发者工具&#xff0c;MySQL数据库&#xff0c;IDE等工具 工具下载地址&#xff1a; Anaconda&#xff1a;https://www.anaconda.com/download MySQL&#xff1a;https://dev.mysql.com/downloads/mysql/ 微信开…...

编程日记 2023/11/13 1:33:19

mysql 讲解(1)

文章目录 前言一、基本的命令行操作二、操作数据库语句2.1、创建数据库2.2、删除数据库2.3、使用数据库2.4 查看所有数据库 三、列的数据类型3.1 字符串3.2 数值3.3 时间日期3.4 空3.5 int 和 varchar问题总结&#xff1a; 四、字段属性4.1 UnSigned4.2 ZEROFILL4.3 Auto_InCre…...

编程日记 2023/11/13 1:32:18

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格式演…...

编程日记 2023/11/13 1:31:17

腾讯域名优惠卷领取

腾讯域名到到期了&#xff0c;听说申请此计划&#xff0c;可获得优惠卷&#xff0c;看到网上5年域名只需要10元&#xff0c;姑且试试看。 我的博客即将同步至腾讯云开发者社区&#xff0c;邀请大家一同入驻&#xff1a;https://cloud.tencent.com/developer/support-plan?in…...

编程日记 2023/11/13 1:28:14

elastic-job 完结篇

一 elastic-job 1.1 案例场景分析 1.设置4个分片&#xff0c;10秒执行一次。 分片弹性扩容缩容机制测试&#xff1a; 测试1&#xff1a;测试窗口1不关闭&#xff0c;再次运行main方法查看控制台日志&#xff0c;注意修改application.properties中的 server.port&#xf…...

编程日记 2023/11/13 1:27:13

基于 Gin 的 HTTP 代理 demo

上次用 TCP 模拟了一个 HTTP 代理之后&#xff0c;感觉那样还是太简陋了&#xff0c;想着是不是可以用框架来做一个有点实际用处的东西。所以&#xff0c;就思索如何用 golang 的 Gin 框架来实现一个&#xff1f;嗯&#xff0c;对的你没有听错&#xff0c;是 gin 框架。你可能会…...

编程日记 2023/11/13 1:26:12

【ATTCK】MITRE Caldera - 测试数据泄露技巧

CALDERA是一个由python语言编写的红蓝对抗工具&#xff08;攻击模拟工具&#xff09;。它是MITRE公司发起的一个研究项目&#xff0c;该工具的攻击流程是建立在ATT&CK攻击行为模型和知识库之上的&#xff0c;能够较真实地APT攻击行为模式。 通过CALDERA工具&#xff0c;安全…...

编程日记 2023/11/13 1:25:11

【数据结构】树与二叉树（十二）：二叉树的递归创建（算法CBT）

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…...

编程日记 2023/11/13 1:23:09

Qt绘制网格和曲线

绘制网格&#xff1a; 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/13 1:22:08

2023-11-12

今日比较摆烂, 但是把自写管道的原理搞懂了, 主要是把 exp 完完全全看懂了, 还不错. 然后就没干啥了. 明日计划: 学校的作业. AFL 源码. 我真是服了我自己了, AFL 源码搁多久了, 操操操 然后把 seccomp 重新学习下...

编程日记 2023/11/13 1:21:07

[工业自动化-16]：西门子S7-15xxx编程 - 软件编程 - 西门子仿真软件PLCSIM

目录 前言&#xff1a; 一、PLCSIM仿真软件 1.1 PLCSIM仿真软件基础版&#xff08;内嵌&#xff09; 1.2 PLCSIM仿真软件与PLCSIM仿真软件高级版的区别&#xff1f; 1.3 PLCSIM使用 前言&#xff1a; PLC集成开发环境是运行在Host主机上&#xff0c;Host主机与PLC可以通过…...

编程日记 2023/11/13 1:20:06

运行npm install卡住不动的几种解决方案

在前端开发经常会遇到运行npm install 来安装工具包一直卡住不动&#xff0c;为此这里提供几种解决方案&#xff0c;供大家参考学习&#xff0c;不足之处还请指正。 第一种方案、首先检查npm代理&#xff0c;是否已经使用国内镜像 // 执行以下命令查看是否为国内镜像 npm con…...

编程日记 2023/11/13 1:18:04

[Android]_[初级]_[配置gradle的环境变量设置安装位置]

场景 在开发Android项目的时候, gradle是官方指定的构建工具。不同项目通过wrapper指定不同版本的gradle。随着项目越来越多&#xff0c;使用的gradle版本也增多&#xff0c;导致它以来的各种库也增加&#xff0c;系统盘空间不足&#xff0c;怎么解决&#xff1f; 说明 grad…...

编程日记 2023/11/13 1:17:03

docker更改存储目录原因及方案

为什么一定要将docker的存储目录挂载到其他目录 docker在安装时默认存储目录在/var/lib/docker&#xff0c;而该目录是在系统盘下的。docker安装后&#xff0c;会使用各种各样的镜像&#xff0c;动辄几个G&#xff0c;那么如此多的镜像文件&#xff0c;装着装着系统盘就撑爆了…...

编程日记 2023/11/13 1:15:01

HTTPS的工作流程

. HTTPS是什么&#xff1f; https是应用层中的一个协议&#xff0c;是在http协议的基础上引入的一个加密层。 为什么需要HTTPS 由于http协议内容都是按照文本的方式明文传输的&#xff0c;这就导致传输过程中会出现一些被篡改的情况。运营商劫持事件最开始百度&#xff0c;…...

编程日记 2023/11/13 1:12:56

C++语言的广泛应用领域

目录 1. 系统级编程 2. 游戏开发 3. 嵌入式系统 4. 大数据处理 5. 金融和量化分析 6. 人工智能和机器学习 7. 网络和通信 结语 C是一种多范式编程语言&#xff0c;具有高性能、中级抽象能力和面向对象的特性。由Bjarne Stroustrup于1979年首次设计并实现&#xff0c;C在…...

编程日记 2023/11/13 1:09:52

Lambertian模型（完美漫反射）

这里使用相乘的方式组合光照色和纹理色。根据这个模型,面朝光源的区域光照强度高,纹理色也相应增强。面背光源的区域光照弱,纹理色也被抑制。这样通过光照和纹理的结合,可以合成出具有照明效果的面部颜色,而不仅仅是固定的纹理本身的颜色。相乘方式可以近似实现不同光照方向下面…...

编程日记 2023/11/13 1:08:51

MATLAB的编程与应用，匿名函数、嵌套函数、蒙特卡洛法的掌握与使用

目录 1.匿名函数 1.1.匿名函数的定义与分类 1.2.匿名函数在积分和优化中应用 2.嵌套函数 2.1.嵌套函数的定义与分类 2.2.嵌套函数彼此调用关系 2.3.嵌套函数在积分和微分中应用 3.微分和积分 4.蒙特卡洛法 4.1.圆周率的模拟 4.2.计算N重积分&#xff08;均匀分布&am…...

编程日记 2023/11/13 1:07:50

NFS服务器的搭建

架设一台NFS服务器&#xff0c;并按照以下要求配置 准备阶段&#xff1a;准备两台虚拟机&#xff0c;一台作为服务端&#xff0c;一台作为客户端 服务端&#xff08;Server&#xff09;&#xff1a;192.168.75.139 客户端&#xff08;Client&#xff09;:192.168.75.160 两…...

编程日记 2023/11/13 1:04:46

D3KeyHelper：如何通过智能宏技术解决暗黑3玩家的操作疲劳难题

D3KeyHelper&#xff1a;如何通过智能宏技术解决暗黑3玩家的操作疲劳难题 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 暗黑破坏神3作为一款动作角…...

编程新知 2026/4/10 9:07:13

Django-unicorn 性能优化技巧：10个提升应用响应速度的终极指南

Django-unicorn 性能优化技巧&#xff1a;10个提升应用响应速度的终极指南 【免费下载链接】django-unicorn The magical reactive component framework for Django ✨ 项目地址: https://gitcode.com/gh_mirrors/dj/django-unicorn Django-unicorn 是一个神奇的响应式组…...

编程新知 2026/4/10 8:48:14

很多人对渗透测试工程师的认知停留在“模拟黑客攻击”，但实际工作内容远比这更全面。

在上一篇渗透测试入门指南发布后&#xff0c;很多粉丝私信我&#xff1a;“成为一名合格的渗透测试工程师&#xff0c;到底需要具备哪些硬实力&#xff1f;”“入行后该如何规划职业路径&#xff0c;避免原地踏步&#xff1f;”“企业招聘时更看重哪些技能和经验&#xff1f;”…...

编程新知 2026/4/10 6:55:52

【箱线图详解】

文章目录一. 什么是箱线图二. 箱线图详解2.1 下界2.2 下四分位数&#xff08;Q1&#xff0c;25%分位数&#xff09;2.3 中位数&#xff08;Q2&#xff0c;50%分位数&#xff09;2.4 上四分位数&#xff08;Q3&#xff0c;75%分位数&#xff09;2.5 上界三. 两个关键概念3.1 四分…...

编程新知 2026/4/10 6:37:42

第六周作业xy

文章目录1.数码管显示6个91.1效果展示1.2代码显示2.数码管显示2个7&#xff08;一头一尾&#xff09;2.1效果展示2.2代码显示3.数码管轮播显示6位3.1效果展示3.2代码显示4.数码管轮播显示两位4.1效果展示4.2代码显示5.数码管跑马灯5.1效果展示5.2代码显示6.小数点数码管6.1效果…...

编程新知 2026/4/10 5:00:13

YOLO26镜像实战案例分享：基于自定义数据集的训练与评估

YOLO26镜像实战案例分享&#xff1a;基于自定义数据集的训练与评估 在计算机视觉领域&#xff0c;目标检测一直是核心且应用广泛的任务。从安防监控到自动驾驶&#xff0c;从工业质检到医疗影像&#xff0c;快速准确地识别图像中的物体是许多智能系统的基石。YOLO系列模型以其…...

编程新知 2026/4/10 4:56:13

基于STM32的多功能温室大棚环境监测系统：实时显示、远程监控与智能调节温湿度

基于stm32多路温室大棚监测 容易制作 主要功能&#xff1a; [1]OLED屏可以实时显示四路温湿度数据 [2]手机APP可以远程监控四路温湿度数据 [3]温度湿度阈值均可手动通过按键设置 温度或者湿度超过阈值上限打开排气扇 温度低于阈值打开加热器 湿度低于阈值打开加湿器 原理图pcb…...

编程新知 2026/4/10 4:43:53

2026年成都最值得关注的整合营销推广推荐榜单

推荐1 &#xff1a;橙意机构 [整合营销推广服务]橙意机构简介橙意机构致力于打造一条集合多领域的创意产业生态链&#xff0c;以策略与咨询、创意内容创作、全媒体传播、创新技术开发为核心引擎&#xff0c;在互动营销、品牌整合、公关活动、广告策略及设计、影视制作、短视频运…...

编程新知 2026/4/10 4:18:16

% 的人都用错了！Playwright vs Chrome DevTools MCP到底该怎么选？惩

一、环境准备 Free Spire.Doc for Python 是免费 Python 文档处理库&#xff0c;无需依赖 Microsoft Word&#xff0c;支持 Word 文档的创建、编辑、转换等操作&#xff0c;其中内置的 Markdown 解析能力&#xff0c;能高效实现 Markdown 到 Doc/Docx 格式的转换&#xff0c;且…...

编程新知 2026/4/10 4:01:49

PP-DocLayoutV3商业应用：银行票据+政务公文+出版古籍三场景落地案例

PP-DocLayoutV3商业应用&#xff1a;银行票据政务公文出版古籍三场景落地案例 1. 新一代文档布局分析引擎的价值 在日常工作中&#xff0c;我们经常遇到各种文档处理难题&#xff1a;银行票据信息提取繁琐、政务公文格式复杂难解析、古籍文献数字化效率低下。传统OCR技术只能…...

编程新知 2026/4/10 3:31:11