动态表单行管理：利用JavaScript与jQuery实现增删功能

程序猿 • 2025年11月10日 14:27:46 • web前端 • 阅读 0

本文旨在提供一个详细教程，指导如何在HTML表单中动态添加和删除行，尤其是在表单内容包含PHP生成数据时。我们将通过JavaScript和jQuery实现DOM操作，构建可复用的行模板，并探讨如何处理PHP预渲染内容以及动态下拉菜单的选项，确保表单功能完整且用户体验流畅。

引言：动态表单行的需求

在现代Web应用中，用户经常需要动态地向表单中添加或删除条目，例如添加多个设备信息、联系人或产品规格。这种需求通过静态HTML难以满足，而JavaScript结合DOM操作则能优雅地解决。本教程将聚焦于如何利用jQuery简化这一过程，并特别关注当HTML内容由PHP动态生成时可能遇到的挑战。

核心挑战：PHP与JavaScript的协同

用户在开发过程中常遇到的一个困惑是，当HTML表单中包含PHP标签（例如，用于从数据库加载下拉菜单选项）时，如何使用JavaScript动态复制这些行。理解PHP和JavaScript的执行环境是关键：

PHP（服务器端）： PHP在服务器上执行，负责生成最终的HTML、CSS和JavaScript代码，然后将其发送到客户端浏览器。这意味着当浏览器接收到页面时，所有的PHP标签都已经被处理并替换成了具体的HTML内容。JavaScript（客户端）： JavaScript在浏览器中执行，它操作的是PHP已经生成并发送到客户端的最终HTML结构。

因此，当JavaScript动态添加或删除行时，它操作的是已经渲染好的HTML字符串。如果一个行模板包含PHP动态生成的内容（如下拉菜单的选项），那么在构建JavaScript模板字符串时，我们应该包含PHP已经渲染出的完整HTML片段，而不是PHP标签本身。如果新添加的行需要动态加载数据（例如，根据用户的选择实时从数据库获取选项），则需要通过AJAX（异步JavaScript和XML）在客户端与服务器进行通信。

立即学习“Java免费学习笔记（深入）”；

使用jQuery实现动态行操作

jQuery库极大地简化了JavaScript的DOM操作，使其成为实现动态表单行的理想选择。

HTML结构准备

为了实现动态行的添加和删除，我们需要一个清晰的HTML结构。通常，我们会将可重复的表单元素放在一个zuojiankuohaophpcntable>的

内，或者一个

容器内。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74 查看详情表单大师AI 容器元素： 使用

作为所有动态行的父容器。操作按钮： 在表头或每行末尾添加“添加”和“删除”按钮。这些按钮应具有易于识别的类名或data-*属性，以便JavaScript可以准确地定位它们。表单字段命名： 对于会重复的输入字段（如name=”brand[]”），使用数组命名约定（name=”fieldname[]”）。这样，当表单提交时，服务器端（如PHP）可以轻松地将这些字段的值作为数组接收。

示例HTML片段（基于用户提供代码的简化和优化）：

                        Device Brand             Device Model             Serial Number             SLA Device                     
    
                                                                                        Brand A                    Brand B                                                                                                                    Model X                    Model Y

Device Brand	Device Model	Serial Number	SLA Device
Brand A Brand B	Model X Model Y

注意：

add-row-btn和delete-row-btn是自定义的类名，用于JavaScript选择器。name=”brand[]”、name=”model[]”等确保表单提交时数据以数组形式传递。id属性（如id=”brand”）在动态复制时会导致ID重复，这是无效HTML。建议将id属性移除，或为每个新行动态生成唯一的ID，但通常对于动态行中的字段，使用类名进行JavaScript操作更为稳妥。

JavaScript行模板的构建

将要复制的行内容存储为一个JavaScript字符串模板。这允许我们轻松地插入新的行。

// 注意：此模板中的下拉菜单选项是硬编码的示例。// 如果需要PHP动态生成的选项，应将PHP渲染后的完整  HTML片段放入此模板。const table_row_html = `                                        Select Brand                Brand A                Brand B                Brand C                <!-- 如果需要PHP动态加载的选项，将PHP渲染后的  标签放在这里 -->                                                        Select Model                Model X                Model Y                Model Z                <!-- 如果需要PHP动态加载的选项，将PHP渲染后的  标签放在这里 -->                                                `;

处理PHP预填充的下拉菜单：如果您的下拉菜单选项是由PHP从数据库加载的，并且希望新添加的行也包含这些选项，最直接的方法是：

在PHP渲染初始页面时，确保标签内部包含了所有可能的标签。将这个完整的、由PHP渲染后的…HTML片段直接复制到JavaScript的table_row_html模板字符串中。这样，当JavaScript复制行时，它会复制包含所有预设选项的下拉菜单。

添加行功能实现

使用jQuery的事件委托机制来处理动态添加的“添加”按钮点击事件。

$(document).ready(function() {    // 监听所有 .add-row-btn 按钮的点击事件    $(document).on("click", ".add-row-btn", function() {        const table_body = $(this).closest("table").find("tbody");        // 将模板字符串追加到 tbody        table_body.append(table_row_html);        // 如果新行中的元素需要特定的JS初始化（如日期选择器、自定义下拉菜单），在这里进行        // 例如：table_body.find(".new-element-class").somePluginInitialization();        return false; // 阻止默认的链接或按钮行为    });});

删除行功能实现

同样使用事件委托来处理动态添加的“删除”按钮点击事件。

$(document).ready(function() {    // 监听所有 .delete-row-btn 按钮的点击事件    $(document).on("click", ".delete-row-btn", function() {        // 确保至少保留一行，防止全部删除导致无法添加        const table_body = $(this).closest("tbody");        if (table_body.find(".dynamic-row").length > 1) {            $(this).closest("tr").remove(); // 移除最近的父级  元素        } else {            alert("至少需要保留一行。");        }        return false; // 阻止默认的链接或按钮行为    });});

完整示例代码

结合上述HTML和JavaScript，这是一个完整的实现示例：

            动态表单行管理                            .card { margin-bottom: 20px; }        .table th, .table td { vertical-align: middle; }                                                                                        设备信息
                    
                                                                                                                                            设备品牌                                     设备型号                                     序列号                                     SLA设备                                                                                                                                                 
                            
                                                                                                                                                                                                                    选择品牌                                                                                        Dell                                            HP                                            Lenovo                                                                                                                                                                                                    选择型号                                                                                        Latitude 7420                                            EliteBook 840 G8                                            ThinkPad X1 Carbon                                                                                                                                                                                                                                                                                                    
                            
                        
                    
                
                    
    
                            // JavaScript 行模板        const table_row_html = `                                                                        选择品牌                        Dell                        HP                        Lenovo                                                                                                                        选择型号

设备品牌	设备型号	序列号	SLA设备
选择品牌 Dell HP Lenovo	选择型号 Latitude 7420 EliteBook 840 G8 ThinkPad X1 Carbon

以上就是动态表单行管理：利用JavaScript与jQuery实现增删功能的详细内容，更多请关注php中文网其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/588639.html

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

342.0K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

基于可见区域动态调整按钮行为：SPA中事件处理的优化实践

上一篇 2025年11月10日 14:26:57

JavaScript实现自定义下拉菜单的必填验证

下一篇 2025年11月10日 14:28:31

好文分享

c语言和java语法有区别吗？

c语言和java语法有区别吗？ c语言和java在语法上有区别，区别是： 1、C语言有指针，java没有指针； C语言的语法比较简单，但是它的亮点指针很容易出错，想要好好的运用指针是件很难的事情，用好了，对程序有很好的帮助，反之，就会让程序崩溃掉，而Java 没有指针的概念，Java更实用于开发东西…

程序猿
2025年12月17日
0000
好文分享

php与c语言有什么联系和区别？

php与c语言之间有什么联系和区别？下面本篇文章就给大家简单介绍一下php与c语言之间联系和区别，希望对你们有所帮助。 php与c语言之间的联系 PHP语言的内核就是C语言写成的，其语法大量借鉴C语言、Java和Perl的语法。 php与c语言之间的区别下面给大家介绍php与c语言之间的一些区别：…

程序猿
2025年12月17日
0000
好文分享

c语言之后学什么？

有朋友在学完c语言后困惑之后该怎么办？小编想说其实只要你c语言基础打得好，学习其他语言都不是事儿，主要看你未来想从事哪方面的工作，下面我将就每几个领域和大家说说，以后可以学哪些。想未来从事嵌入式开发的，可以学习ARM嵌入式等；想未来从事软件、游戏开发的，也可以学习C++、openGL等；想未来…

程序猿
2025年12月17日
0000
.NetCore如何获取Json和Xml格式的配置信息讲解

本篇将和大家分享的是如何获取json和xml格式的配置信息，主要介绍的是configuration扩展方法的使用，对.netcore 获取json和xml格式的配置信息的相关知识，感兴趣的朋友一起看看吧本篇将和大家分享的是：如何获取Json和Xml格式的配置信息，主要介绍的是Configurati…

程序猿
2025年12月17日 • 好文分享
0000
ASP.NET MVC 使用Bootstrap方法介绍

本篇文章主要介绍了asp.net mvc 使用bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧作为一名Web开发者而言，如果不借助任何前端框架，从零开始使用HTML和CSS来构建友好的页面是非常困难的。特别是对于Windows Form的开发者而…

程序猿
2025年12月17日 • 好文分享
0000
好文分享

.Net实现微信JS-SDK分享功能代码展示

这篇文章主要介绍了微信js-sdk分享功能的.net实现代码的相关资料,需要的朋友可以参考下 JS-SDK接口是什么? 为了方便开发者实现微信内的网页(基于微信浏览器访问的网页)功能，比如拍照、选图、语音、位置等手机系统的能力，并方便开发者直接使用微信分享、扫一扫等微信特有的能力，微信推出了JS-S…

程序猿
2025年12月17日
0000
ASP.NET MVC如何使用Bootstrap的实例分析

本篇文章主要介绍了asp.net mvc 使用bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧作为一名Web开发者而言，如果不借助任何前端框架，从零开始使用HTML和CSS来构建友好的页面是非常困难的。特别是对于Windows Form的开发者而…

程序猿
2025年12月17日 • 好文分享
0000
C#中String类型与json之间相互转换的实现方法

这篇文章主要介绍了c#实现string类型和json之间的相互转换功能,涉及c# json格式数据的构造、转换相关操作技巧,需要的朋友可以参考下本文实例讲述了C#实现String类型和json之间的相互转换功能。分享给大家供大家参考，具体如下： ////Donet2.0 需要添加引用// 从一个对…

程序猿
好文分享 2025年12月17日
0000
C#实现Json序列化删除null值的方法实例

要将一个对象序列化,可是如果对象的属性为null的时候，我们想将属性为null的都去掉,怎么处理呢?其实方法很简单的，下面就跟随本站小编一起学习c#中 json 序列化去掉null值的方法吧要将一个对象序列化,可是如果对象的属性为null的时候，我们想将属性为null的都去掉。在这里我使用New…

程序猿
好文分享 2025年12月17日
0000
比较C#和JAVA中面向对象语法的区别

面向对象是一种开发思想，最应该记住的一句话是万物皆对象。为了让程序更好的被理解和编写，把现实生活中描述事物的方式和思路融合进入，就成了面向对象的思想。把生活中的事物融合进程序中那么就需要描述，描述分为特征和行为两方面，而不同类别的对象特征和行为具有巨大的差异，为了更好的制定描述每一类事物的方式，那么…

程序猿
好文分享 2025年12月17日
0000
好文分享

分享一个jQuery效果实例代码

这是我的原文OneNote地址：以上就是分享一个jQuery效果实例代码的详细内容，更多请关注创想鸟其它相关文章！

程序猿
2025年12月17日
0000
关于json result的实例代码

public jsonresult jsondata() { httpcontext.response.appendheader(“access-control-allow-origin”, “*”); …

程序猿
好文分享 2025年12月17日
0000
详细介绍C#代码与javaScript函数的相互调用

C#代码与JavaScript函数的相互调用问：1.如何在javascript访问c#函数?2.如何在javascript访问c#变量?3.如何在c#中访问javascript的已有变量?4.如何在c#中访问javascript函数? 问题1答案如下：javascript函数中执行c#代码中的函数…

程序猿
好文分享 2025年12月17日
0000
好文分享

XML中如何压缩文件_XML压缩XML文件的方法与技巧

答案：通过ZIP/GZIP压缩、优化XML结构、使用EXI等专用格式可显著减小XML文件体积。具体包括利用通用算法压缩、精简标签与属性、采用二进制交换格式，并结合场景选择兼顾压缩率与兼容性的方案。处理XML文件时，文件体积过大常常影响传输效率和存储成本。通过合理的压缩方法，可以显著减小XML文件的…

程序猿
2025年12月17日
0000
好文分享

什么是XML Infoset

XML Infoset是W3C定义的抽象数据模型，用于标准化XML文档解析后的信息表示。它定义了11种信息项（如文档、元素、属性等），屏蔽物理格式差异，确保不同解析器对XML内容的理解一致。DOM和SAX等解析技术均基于Infoset构建：DOM将其具象化为树结构，SAX则通过事件流式暴露信息项。I…

程序猿
2025年12月17日
0000
好文分享

XML中如何判断节点是否为叶子节点_XML判断节点是否为叶子节点的方法

判断XML节点是否为叶子节点的关键是检查其是否有子元素。1. 使用DOM解析器时，遍历节点的子节点，若无Element类型子节点则为叶子节点；2. 使用XPath可通过表达式not(./*)筛选出没有子元素的节点；3. Python中利用ElementTree的len(node) == 0判断节点无…

程序猿
2025年12月17日
0000
好文分享

RSS订阅中的作者信息格式

RSS和Atom中作者信息通过或标签标识，包含姓名、邮箱及网站链接，支持多作者；正确设置有助于提升内容可信度、便于追踪与SEO。 RSS订阅中的作者信息格式，主要用于标识文章的作者，让读者知道是谁写的，方便追踪特定作者的内容。格式通常包含作者姓名、邮箱，有时还会包含作者的网站链接。作者信息的常见格…

程序猿
2025年12月17日
0000
好文分享

XML中如何获取根节点属性_XML获取根节点属性的操作步骤

XML根节点有且仅有一个，可包含属性；2. Python用ET.parse解析，root.get(“属性名”)获取属性值；3. JavaScript用DOMParser解析，xmlDoc.documentElement获取根节点，getAttribute读取属性；4. Jav…

程序猿
2025年12月17日
0000
好文分享

XML中如何提取指定节点_XML提取指定节点的详细步骤

首先理解XML结构，明确目标节点路径；接着使用XPath表达式如//title或/books/book[@id=’1′]定位节点；然后通过Python的lxml库解析XML并执行XPath提取文本或属性；最后处理多层级节点与属性，结合条件筛选和遍历方法精准获取数据。在处理X…

程序猿
2025年12月17日
0000
好文分享

XML中如何生成XML报表模板_XML生成XML报表模板的方法与示例

利用XSLT、编程语言或模板引擎可生成XML报表模板：1. XSLT将源XML转换为结构化报表；2. Python等语言通过DOM操作动态构建XML；3. Jinja2等模板引擎支持变量与逻辑控制，实现灵活输出。在XML中生成XML报表模板，实际上是指利用XML的结构化特性设计一个可复用的数据模板…

程序猿
2025年12月17日
0000