javascript-动态增加和删除表格的行

news2024/11/15 22:45:51

本地环境:win10 / centos6 , python3


实现效果

点击添加峰图按钮即可增加一行,点击每行右侧的删除按钮即可删除行。

初始状态:
在这里插入图片描述
点击后:
在这里插入图片描述
实际生成的html内容类似下图,可以看到,只有id这样需要保持唯一的属性发生了变化,其他属性基本无变化。
在这里插入图片描述
点击右侧的删除按钮:
在这里插入图片描述

解决

首先在表单form里构造一个table,结构如下:

<form action="run_command_ab1" id="main_form" >
	<div id="suborderlist">
		<table>
			<thead>
				<tr class="form-group hide" id="subOrdersTitles">
            		<th>No</th>
	            	<th>峰图位置</th>
            		<th>附件</th>
            		<th>操作</th>
            	</tr>
            </thead>
            <tbody>
            	<tr class="form-group hide" id="subOrders" name="subOrders">
					<!-- 略去一些内容 -->
					<!-- 这是编号 -->
					<td name="rowIdx"></td>
					<!-- 略去一些内容 -->
					<td>
						<input name="attach" type="file" id="customFile">
            		</td>
            		<td>
            			<button type="button" class="btn btn-primary" name="removeRowButton" onclick="deleteARow.call(this)">
                    		删除
                    	</button>
            		</td>
            	</tr>
            </tbody>
		</table>
</form>

假设添加按钮的id叫addButton,给它加上click事件:

// 标记行号
index = 0;

$("#addButton").click(function () {
    index++;
    $('#subOrdersTitles').removeClass('hide');
    var $template = $('#subOrders'),
    	$clone = $template
    		.clone()
    		.removeClass('hide')
    		.removeAttr('id')
    		.attr('id', 'data-index'+index)
    		.insertBefore($template);
         $clone
            	.find('[name="rowIdx"]').attr('id', 'rowIdx.' + index).end()
            	// 其他列类似,略
            	.find('[name="removeRowButton"]').attr('pid', 'data-index'+index).end();
	// 修改No.	
	document.getElementById('rowIdx.'+index).innerHTML = index;
}); 

删除行的代码则是:

function deleteARow() {
	var $this = $(this);
	var parent = $this.attr("pid");
	$("#"+parent).remove();
}	

END.

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

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

相关文章

VMware capacity mismatch for disk错误解决办法

因为业务或者学习很多时候我们要用到虚拟机&#xff0c;当我们使用vmware去打开VirtualBox导出的文件虚拟机镜像时会发生capacity mismatch for disk错误&#xff0c;同时在网上查询没有完整通俗易懂的解决方案&#xff0c;我本人也遇到了这个错误&#xff0c;经过测试以后写下…

arcgis server 发布地图服务相关问题

地图类型选择feature access 发布后&#xff0c;存在个别图层失败&#xff0c; 配置符号后&#xff0c;发布地图服务时&#xff0c;选择了Map Server 和Feature Access后&#xff0c;地图发布成功&#xff0c;但是对于feature server 类型中部分图层失败&#xff0c;在服务目录…

【题解】【数学】—— [CSP-J2019 江西] 次大值

【题解】【数学】—— [CSP-J2019 江西] 次大值 [CSP-J2019 江西] 次大值题目描述输入格式输出格式输入输出样例输入 #1输出 #1输入 #2输出 #2输入 #3输出 #3 提示 解法1.暴力枚举(非正解)1.1.题意分析1.2.代码 解法2.总结规律(正解)2.1.题意分析2.1.1.解题思路2.2.2.功能拆解 …

5个适用于Linux系统的PDF转Word工具

凭借其跨平台和设备的统一标准、兼容性和规模小巧等主要优点&#xff0c;可携带文档格式&#xff08;PDF&#xff09;可谓最主流的文件格式之一。 市面上有许多查看PDF文件的强大工具&#xff0c;因此所有Linux系统的用户都可以根据自身喜好找到合适的PDF查看工具。然而&#x…

三星、小米和 OPPO设备实验室将采用Android设备流技术

早在 5 月份的年度开发者大会上&#xff0c;Google就发布了 Android 设备流测试版。开发人员可以在Google数据中心的真实物理设备上更轻松、更互动地测试自己的应用程序&#xff0c;这些设备会直接串流到 Android Studio。今天&#xff0c;Google宣布与三星、小米和 OPPO 合作扩…

染色法+组合数学,CF 557D - Vitaly and Cycle

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 557D - Vitaly and Cycle 二、解题报告 1、思路分析 t 的取值范围为&#xff1a;[0, 3] 0&#xff1a;本身有奇环&#xff0c;样例说明方案为1 1&#xff1a;存在偶数长度路径&#xff0c;连接一下就行&a…

【数据结构】顺序表实现

0. 前言 小伙伴们大家好&#xff0c;从今天开始&#xff0c;我们就开始学习《数据结构》这门课程~ 首先想给大家讲讲什么是数据结构&#xff1f; 0.1 数据结构是什么&#xff1f; 数据结构是由“数据”和“结构”两词组合⽽来。 什么是数据&#xff1f; 比如常⻅的数值1、…

Visionpro二次开发学习笔记8-如何将静态或交互式图形添加到CogDisplay中

如何将静态或交互式图形添加到CogDisplay中 CogDisplay支持两种类型的图形&#xff1a;静态图形和交互式图形。静态图形一旦添加到显示中&#xff0c;就无法移动或更改。静态图形不能添加提示文本&#xff08;TipText&#xff09;。 交互式图形在启用图形的交互属性时&#x…

【数据结构】-----二叉搜索树(C++)

目录 前言 一、是什么 ​编辑 二、实现 Ⅰ、结点类 Ⅱ、结构及基本接口实现 ​编辑 ①插入 ②查找 ③删除(重难点) 情况一&#xff1a;待删除结点为叶子结点(无孩子) 情况二&#xff1a;待删除结点存在一个孩子结点(可能左/右) 情况三&#xff1a;待删除结点存在…

【iOS】—— 事件传递链和响应者链总结

事件传递链和响应者链总结 1. 事件传递链&#xff1a;事件传递链&#xff1a;传递流程&#xff1a;总结第一响应者&#xff1a; 2. 响应者链响应者链传递流程总结响应者链流程 总结&#xff1a; 之前也学习过这个内容这次在复习的时候&#xff0c;就想着写一下总结&#xff1a;…

Linux部署python3.0版本——及基本操作

&#xff08;一&#xff09;部署环境 首先查看列表&#xff0c;找到python3.0的包 yum list installed|grep python 如果没有&#xff0c;是因为yum源的问题&#xff0c;可部署阿里云镜像然后下载epel包&#xff0c;这里的内容可参考前面的阿里云镜像部署 然后进行下载 yum…

TensorRT-LLM中的 Quantization GEMM(Ampere Mixed GEMM)的 CUTLASS 2.x 实现讲解

在LLM的推理和部署中&#xff0c;低精度量化对于性能的提升十分关键&#xff0c;本次分享将为大家介绍TRT-LLM中是如何基于CUTLASS 2.x来实现PerChannel/AWQ/SmoothQuant等量化方法在模型推理过程的计算。Slides来自BiliBili NVIDIA英伟达频道 上传的《TensorRT-LLM中的 Quanti…

最新CSS3伪类和伪元素详解

第4章 伪类和伪元素 4.1结构伪类 E:first-child{},第一个元素 样式&#xff1a; p:first-child {color: red; } <div><p>Lorem ipsum</p><p>Dolor sit amet.</p> </div> 4.1.1nth-*伪类 以计数为基础的&#xff0c;默认情况下&…

某赛通电子文档安全管理系统 CDGAuthoriseTempletService1 SQL注入漏洞复现(XVE-2024-19611)

0x01 产品简介 某赛通电子文档安全管理系统(简称:CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护,系统具有透明加密、主动加密、智能…

RPA在政务服务中的挑战与解决方案

随着数字化时代的到来&#xff0c;数字政务的建设已成必然趋势&#xff0c;RPA作为数字化转型的重要工具之一&#xff0c;能够帮助政府单位快速实现业务流程的自动化和智能化&#xff0c;提高工作效率和质量&#xff0c;为建设数字政务提供强有力的支持&#xff0c;因此正被越来…

深植根基、蓬勃向上 | openKylin 2.0正式发布!

2024年8月8日&#xff0c;openKylin 2.0版本正式发布&#xff01;该版本默认搭载Linux 6.6 LTS内核&#xff0c;完成180操作系统核心组件自主选型升级&#xff0c;深度融合AI技术&#xff0c;上线麒麟AI助手等实用AI功能&#xff0c;并为用户带来包括开明软件包格式、不可变系统…

Unity 在Editor下保存对Text组件的文本的修改

Unity 在Editor下保存对Text组件的文本的修改 /****************************************************文件&#xff1a;TimeStampForText.cs作者&#xff1a;lenovo邮箱: 日期&#xff1a;2024/8/8 1:9:21功能&#xff1a; *************************************************…

聚观早报 | 小米15 Ultra相机规格;一加Ace 5参数规格

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 8月8日消息 小米15 Ultra相机规格 一加Ace 5参数规格 iOS 18.1代码曝光 SK电讯加大AI投入 Figure 02 人形机器人…

【VScode】如何在anaconda虚拟环境中打开vscode项目

文章目录 【必备知识】打开anaconda虚拟环境切换到项目工作目录激活anaconda虚拟路径让vscode从当前目录打开 【必备知识】 anaconda环境变量配置及配置python虚拟环境 https://blog.csdn.net/xzzteach/article/details/140621596 打开anaconda虚拟环境 切换到项目工作目录 …

Ftrans文件摆渡方案:重塑文件传输与管控的科技先锋

一、哪些行业会用到文件摆渡相关方案 文件摆渡相关的产品和方案通常用于需要在不同的网络、安全域、网段之间传输数据的场景&#xff0c;主要是一些有核心数据需要保护的行业&#xff0c;做了网络隔离和划分。以下是一些应用比较普遍的行业&#xff1a; 金融行业&#xff1a;…