html table可编辑表格数据实现删除

这里教大家使用纯html和js脚本结合实现删除表格数据

<!DOCTYPE html>
<html>
<head><style>table {border-collapse: collapse;width: 100%;}th, td {border: 1px solid black;padding: 8px;text-align: left;}</style>
</head>
<body><table id="editableTable"><thead><tr><th>Name</th><th>Age</th><th>Gender</th><th>Action</th></tr></thead><tbody><tr><td contenteditable="true">John Doe</td><td contenteditable="true">25</td><td contenteditable="true">Male</td><td><button onclick="deleteRow(this)">Delete</button></td></tr><tr><td contenteditable="true">Jane Smith</td><td contenteditable="true">30</td><td contenteditable="true">Female</td><td><button onclick="deleteRow(this)">Delete</button></td></tr><!-- 添加更多行 --></tbody></table><script>function deleteRow(btn) {// 获取所在行var row = btn.parentNode.parentNode;// 获取所在表格var table = row.parentNode.parentNode;// 删除行table.deleteRow(row.rowIndex);}</script>
</body>
</html>

代码解释:

在上述示例中,每行的最后一列添加了一个按钮,并为按钮绑定了一个 onclick 事件,调用 deleteRow 函数。

JavaScript 部分的 deleteRow 函数接受按钮作为参数,在函数内部首先获取按钮的父节点,即所在的 <td> 元素,然后再获取 <td> 的父节点,即所在的行 <tr> 元素,最后获取行元素的父节点,即所在的表格 <table> 元素。

最后,调用 deleteRow 方法,将行的索引作为参数,从表格中删除该行。

这样,当用户点击某一行的“Delete”按钮时,相应的行将被删除。在实际项目中,可能需要进一步确认用户是否要删除该行,以及处理删除后的数据更新。

效果演示:

删除前:

点击按钮删除后:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/579728.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人工智能_机器学习077_Kmeans聚类算法_亚洲国家队自动划分类别_3维可视化实现---人工智能工作笔记0117

然后我们上一节使用聚类算法对,2006年世界杯,2010年世界杯,2007年亚洲杯,足球队进行了自动类别划分,然后 这一节,我们使用代码对,聚类算法的划分结果,进行一下可视化 plt.figure(figsize=(12,9)) 首先指定画布大小 ax=plt.subplot(111,projection=3d) 然后指定111,表示画布的,…

Java之遍历树状菜单

&#x1f607;作者介绍&#xff1a;一个有梦想、有理想、有目标的&#xff0c;且渴望能够学有所成的追梦人。 &#x1f386;学习格言&#xff1a;不读书的人,思想就会停止。——狄德罗 ⛪️个人主页&#xff1a;进入博主主页 &#x1f5fc;专栏系列&#xff1a;无 &#x1f33c…

loTDB数据库学习笔记之初识 —— 筑梦之路

loTDB简介 IoTDB 是针对时间序列数据收集、存储与分析一体化的数据管理引擎。具有体量轻、性能高、易使用的特点&#xff0c;适用于工业物联网应用中海量时间序列数据高速写入和复杂分析查询的需求&#xff0c;同时包含数据订阅、数据同步、负载均衡和运维监控功能。 由清华大学…

pytorch中池化函数详解

1 池化概述 1.1 什么是池化 池化层是卷积神经网络中常用的一个组件&#xff0c;池化层经常用在卷积层后边&#xff0c;通过池化来降低卷积层输出的特征向量&#xff0c;避免出现过拟合的情况。池化的基本思想就是对不同位置的特征进行聚合统计。池化层主要是模仿人的视觉系统…

文件夹共享(普通共享和高级共享的区别)防火墙设置(包括了jdk安装和Tomcat)

文章目录 一、共享文件1.1为什么需要配置文件夹共享功能&#xff1f;1.2配置文件共享功能1.3高级共享和普通共享的区别&#xff1a; 二、防火墙设置2.1先要在虚拟机上安装JDK和Tomcat供外部访问。2.2设置防火墙&#xff1a; 一、共享文件 1.1为什么需要配置文件夹共享功能&…

华为---USG6000V防火墙web基本配置示例

目录 1. 实验要求 2. 配置思路 3. 网络拓扑图 4. USG6000V防火墙端口和各终端相关配置 5. 在USG6000V防火墙web管理界面创建区域和添加相应端口 6. 给USG6000V防火墙端口配置IP地址 7. 配置通行策略 8. 测试验证 8.1 逐个删除策略&#xff0c;再看各区域终端通信情况 …

2024年深度学习、计算机视觉与大模型面试题综述,六大专题数百道题目

DeepLearning-Interview-Awesome-2024 本项目涵盖了大模型(LLMs)专题、计算机视觉与感知算法专题、深度学习基础与框架专题、自动驾驶、智慧医疗等行业垂域专题、手撕项目代码专题、优异开源资源推荐专题共计6大专题模块。我们将持续整理汇总最新的面试题并详细解析这些题目&a…

解决 MacOS JD-GUI 打开失败的问题

JD-GUI下载地址&#xff1a;http://java-decompiler.github.io JD-GUI 是一款轻量级的 Java 反编译工具&#xff0c;对于一些没有源码的 Jar 包&#xff0c;直接拖进去就可以反编译源码&#xff0c;十分的方便。 在 MacOS 还是 Mojave 的时候&#xff0c;JD-GUI 使用一切正常…

负载均衡——Ribbon

文章目录 Ribbon和Eureka配合使用项目引入RibbonRestTemplate添加LoadBalanced注解注意自定义均衡方式代码注册方式配置方式 Ribbon脱离Eureka使用 Ribbon&#xff0c;Nexflix发布的负载均衡器&#xff0c;有助于控制HTTP和TCP客户端的行为。基于某种负载均衡算法&#xff08;轮…

线性代数基础【3】向量

第一节 向量的概念与运算 一、基本概念 ①向量 ②向量的模(长度) ③向量的单位化 ④向量的三则运算 ⑤向量的内积 二、向量运算的性质 (一)向量三则运算的性质 α β β αα (β γ) (α β) γk (α β) kα kβ(k l) α kα lα (二)向量内积运…

TypeScript前端学习(四)

前言 还是分享的笔记&#xff0c;大佬请绕行&#xff01; 一、类的定义和继承 console.log("----对象---"); var people {"name": "张三",syaHi() {console.log("HI,my name is " this.name);} } people.syaHi();console.log("…

使用poi将pptx文件转为图片详解

目录 项目需求 后端接口实现 1、引入poi依赖 2、代码编写 1、controller 2、service层 测试出现的bug 小结 项目需求 前端需要上传pptx文件&#xff0c;后端保存为图片&#xff0c;并将图片地址保存数据库&#xff0c;最后大屏展示时显示之前上传的pptx的图片。需求看上…

sheng的学习笔记-【中】【吴恩达课后测验】Course 4 -卷积神经网络 - 第四周测验

课程4_第4周_测验题 目录 第一题 1.面部验证只需要将新图片与1个人的面部进行比较&#xff0c;而面部识别则需要将新图片与K个人的面部进行比较。 A. 【  】正确 B. 【  】错误 答案&#xff1a; A.【 √ 】正确 第二题 2.在人脸验证中函数d(img1,img2)起什么作用&a…

如何使用宝塔面板+Discuz+cpolar内网穿透工具搭建可远程访问论坛服务

文章目录 前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 前言 Crossday Discuz! Board&#xff08;以下简称 Discuz!&#xff09;是一套通用的社区论坛软件系统&#xff0c;用户可以在不需要任何编程的基础上&a…

少走十年弯路!!!webpack详解

webpack是什么&#xff1f;&#xff1f; 本质上&#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时&#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)&#xff0c;然后将你项目中所需的每一个模…

LSTM的记忆能力实验

长短期记忆网络&#xff08;Long Short-Term Memory Network&#xff0c;LSTM&#xff09;是一种可以有效缓解长程依赖问题的循环神经网络&#xff0e;LSTM 的特点是引入了一个新的内部状态&#xff08;Internal State) 和门控机制&#xff08;Gating Mechanism&#xff09;&am…

禁止选择当天及以后的时间

这篇文章编辑与2023.12.26&#xff0c;所以可以选择的时间为包含2023.12.25以及之前的时间 实现思路&#xff1a;1、获取当天时间的年月日&#xff0c;然后默认时分秒为23&#xff1a;59&#xff1a;59&#xff1b; 2、获取到时间转为时间戳减去 一天&#xff08;1*24*3600*10…

MySQL部署之yum安装

目录 MySQL 清理环境 下载yum源的rpm包 关闭防火墙 关闭selinux 安装必要的软件包 初始化 获取临时密码并修改密码 MySQL https://www.mysql.com //mysql官网 yum安装步骤 yum安装 清理环境 [rootmysql ~]# yum erase mariadb mariadb-server mariadb-libs mariadb-de…

智能三维数据虚拟现实电子沙盘

一、概述 易图讯科技&#xff08;www.3dgis.top&#xff09;以大数据、云计算、虚拟现实、物联网、AI等先进技术为支撑&#xff0c;支持高清卫星影像、DEM高程数据、矢量数据、无人机倾斜摄像、BIM模型、点云、城市白模、等高线、标高点等数据融合和切换&#xff0c;智能三维数…

Ubuntu20.04配置

新建用户 sudo adduser username给用户sudo权限 新创建的用户没有root权限&#xff0c;我们执行以下命令给用户sudo权限 sudo usermod -a -G adm username sudo usermod -a -G sudo username删除用户 删除用户及用户所有文件&#xff08;/home/username/路径下的所有文件&a…