首页 专区 Skill 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > web前端 > js教程

JavaScript 动态表单元素索引重排教程

胖宇同学_8724

胖宇同学_8724

2025-10-04

618人浏览

原创

JavaScript 动态表单元素索引重排教程

本文详细介绍了在 JavaScript 动态生成并删除表单行时，如何解决输入元素索引不连续的问题。通过 jQuery 遍历现有行并利用正则表达式更新 id 和 name 属性，确保删除行后，剩余行的索引能够自动重新排序，从而保证数据提交的完整性和正确性，适用于 ASP.NET MVC 或其他需要顺序索引的后端框架。

引言

在现代 web 应用开发中，动态生成表单元素是常见需求，例如添加多个用户、产品或地址信息。这些动态生成的输入字段通常需要带有连续的数字索引（如 worker[0].namesurname, worker[1].namesurname），以便后端框架（如 asp.net mvc）能够正确地将它们绑定到模型集合。然而，当用户删除中间的某一行时，简单的行删除操作会导致索引出现不连续的空缺，进而引发后端数据绑定错误。本教程将指导您如何使用 javascript (jquery) 解决这一问题，确保在删除行后，剩余行的索引能够自动重新排序。

动态添加表单行的基本实现

首先，我们来看一个动态添加表单行的基本示例。在这个例子中，我们使用一个 countField 变量来跟踪当前的行数，并将其作为输入字段 id 和 name 属性中的索引。

let countField = 0; // 初始索引从0开始更符合数组习惯

$("#addUsers").click(function () {
    // 构建新的行HTML
    var user_row = `
        <div class="row rm-row" data-index="${countField}">
            <div class="col-lg-3 col-md-12 col-sm-12">
                <h1></h1>
            </div>
            <div id="workin_user${countField}" class="col-lg-9 d-flex gap-1">
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">
                    <fieldset>
<label for="worker_${countField}_NameSurname" class="label-text">姓名<span class="text-danger"> *</span></label>
                        <input class="form-control label-text" id="worker_${countField}_NameSurname" name="worker[${countField}].NameSurname" type="text">
</fieldset>
</div>
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">
                    <fieldset>
<label for="worker_${countField}_JobDescription" class="label-text">职位描述<span class="text-danger"> *</span></label>
                        <input class="form-control label-text" id="worker_${countField}_JobDescription" name="worker[${countField}].JobDescription" type="text">
</fieldset>
</div>
                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 mt-lg-4 mt-md-5">
                    <fieldset>
<label for="deleteWorkRow" class="label-text">删除</label>
                        <button type="button" class="btn btn-danger delete-row-btn"><span class="fa fa-trash"></span></button>
                    </fieldset>
</div>
            </div>
        </div>`;

    // 将新行添加到容器
    $('#inputFieldsContainer').append(user_row);
    countField++; // 增加计数器
});

代码说明：

  • countField: 全局变量，用于生成唯一的索引。
  • id="worker_${countField}_NameSurname" 和 name="worker[${countField}].NameSurname"：这是关键部分，id 用于客户端脚本和标签关联，name 用于表单提交时后端模型绑定。注意 name 属性的 worker[${countField}] 格式，这是许多后端框架识别集合元素的标准方式。
  • rm-row 类：用于标识可删除的行。
  • delete-row-btn 类：为删除按钮添加一个通用类，方便事件委托。

删除行的挑战：索引不连续问题

当用户删除某一行时，最直观的做法是移除该行并递减 countField。

// 简单的删除逻辑（存在问题）
$(document).on('click', '.delete-row-btn', function () {
    $(this).closest('.rm-row').remove(); // 移除行
    countField--; // 递减计数器（这并不能解决索引不连续问题）
});

存在的问题：

假设我们添加了三行，它们的 name 属性分别为 worker[0], worker[1], worker[2]。如果用户删除了第二行（worker[1]），那么剩下的行将是 worker[0] 和 worker[2]。当表单提交到后端时，后端框架会尝试绑定到一个包含两个元素的集合，但由于索引不连续（0 之后是 2 而不是 1），可能会导致 worker[1] 丢失，或者数据绑定失败。为了避免这种情况，我们需要在删除行后重新调整所有剩余行的索引。

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

解决方案：删除后重排索引

解决索引不连续问题的关键是在删除行后，遍历所有剩余的动态行，并根据它们在 DOM 中的新位置重新分配连续的索引。

// 优化后的删除逻辑：删除并重排索引
$(document).on('click', '.delete-row-btn', function () {
    $(this).closest('.rm-row').remove(); // 移除当前行

    // 重新遍历所有剩余的 .rm-row 行，并更新其 id 和 name 属性
    $('.rm-row').each(function (index) {
        var row = $(this);
        // 更新行本身的 data-index 属性（可选，但推荐保持同步）
        row.attr('data-index', index);

        // 查找所有 id 属性以 "worker_" 开头的元素（或更精确的模式）
        // 并更新其中的数字索引
        row.find('[id^="worker_"]').attr('id', function (i, currentId) {
            // 匹配 worker_N_FieldName 模式中的 N
            return currentId.replace(/worker_(\d+)_(.*)/, `worker_${index}_$2`);
        });

        // 查找所有 name 属性以 "worker[" 开头的元素
        // 并更新其中的数字索引
        row.find('[name^="worker["]').attr('name', function (i, currentName) {
            // 匹配 worker[N].FieldName 模式中的 N
            return currentName.replace(/worker\[(\d+)\]\.(.*)/, `worker[${index}].$2`);
        });

        // 如果有其他需要更新索引的属性，如for属性，也需在此处处理
        row.find('label[for^="worker_"]').attr('for', function (i, currentFor) {
             return currentFor.replace(/worker_(\d+)_(.*)/, `worker_${index}_$2`);
        });
    });

    // 更新全局计数器以反映当前的总行数（可选，如果仅用于添加，可以不减）
    // 如果 countField 仅用于生成新的唯一索引，那么在删除时不需要递减。
    // 而是应该在添加时基于当前存在的行数来计算。
    // 或者，更简洁的做法是，删除后直接重新计算 countField = $('.rm-row').length;
    countField = $('.rm-row').length;
});

代码说明：

  1. $(this).closest('.rm-row').remove();: 这行代码用于删除用户点击的删除按钮所在的整行。
  2. $('.rm-row').each(function (index) { ... });: 这是核心。它遍历页面上所有带有 rm-row 类的元素（即所有动态添加的行）。each 方法的回调函数会接收到当前元素的索引 index，这个 index 就是我们需要的新的连续索引（从 0 开始）。
  3. row.find('[id^="worker_"]').attr('id', function (i, currentId) { ... });:
    • row.find('[id^="worker_"]')：选择当前行 row 中所有 id 属性以 "worker_" 开头的元素（例如 ）。
    • .attr('id', function (i, currentId) { ... })：使用 attr 方法的函数形式来动态更新 id 属性。currentId 参数是当前元素的 id 属性的旧值。
    • currentId.replace(/worker_(\d+)_(.*)/,worker${index}$2)：这是一个正则表达式替换操作。
      • worker_(\d+)_(.*)：匹配 worker_，然后捕获一个或多个数字 (\d+) 作为第一个捕获组，接着匹配 _，再捕获所有剩余字符 (.*) 作为第二个捕获组。
      • worker_${index}_$2：将匹配到的旧索引 ($1) 替换为 each 循环提供的 index，并保留字段名 ($2)。
  4. row.find('[name^="worker["]').attr('name', function (i, currentName) { ... });: 类似地，这部分代码更新 name 属性，确保 name="worker[N].FieldName" 中的 N 被正确更新。
    • currentName.replace(/worker\[(\d+)\]\.(.*)/,worker[${index}].$2)：匹配 worker[，捕获数字 \d+，然后匹配 ].，再捕获剩余的字段名。替换时使用新的 index。
  5. countField = $('.rm-row').length;: 在完成所有行的索引重排后，更新 countField 以反映当前实际的行数。这样，当再次点击“添加”按钮时，新的行将从正确的下一个索引开始。

完整示例代码

为了方便理解，我们将添加和删除的逻辑整合到一个完整的示例中。



    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态表单索引重排示例</title><!-- 引入 Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 引入 Font Awesome (用于垃圾桶图标) --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>
        .rm-row {
            border: 1px solid #eee;
            margin-bottom: 15px;
            padding: 15px;
            background-color: #f9f9f9;
        }
        .gap-1 > * {
            margin-right: 10px; /* 模拟 gap */
        }
        .gap-1 > *:last-child {
            margin-right: 0;
        }
    </style><div class="container mt-5">
        <h2>动态用户列表</h2>
        <div id="inputFieldsContainer">
            <!-- 动态添加的行将在此处显示 -->
        </div>
        <button type="button" id="addUsers" class="btn btn-primary mt-3">
            <span class="fa fa-plus"></span> 添加用户
        </button>
        <button type="submit" class="btn btn-success mt-3">提交表单</button>
    </div>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><!-- 引入 Bootstrap JS (如果需要其组件) --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script><script>
        let countField = 0; // 初始索引从0开始

        // 添加用户行的函数
        $("#addUsers").click(function () {
            var user_row = `
                <div class="row rm-row" data-index="${countField}">
                    <div class="col-lg-3 col-md-12 col-sm-12">
                        <h1 class="h6">用户 #${countField + 1}
                    
                    <div id="workin_user${countField}" class="col-lg-9 d-flex align-items-end">
                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">
                            <fieldset>
                                <label for="worker_${countField}_NameSurname" class="label-text">姓名<span class="text-danger"> *
                                <input class="form-control label-text" id="worker_${countField}_NameSurname" name="worker[${countField}].NameSurname" type="text" placeholder="请输入姓名"/>
                            
                        
                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">
                            <fieldset>
                                <label for="worker_${countField}_JobDescription" class="label-text">职位描述<span class="text-danger"> *
                                <input class="form-control label-text" id="worker_${countField}_JobDescription" name="worker[${countField}].JobDescription" type="text" placeholder="请输入职位描述"/>
                            
                        
                        <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 mt-lg-4 mt-md-5">
                            <fieldset>
                                <label for="deleteWorkRow" class="label-text" style="visibility: hidden;">删除
                                <button type="button" class="btn btn-danger delete-row-btn"><span class="fa fa-trash">
                            
                        
                    
                `;

            $('#inputFieldsContainer').append(user_row);
            countField++; // 增加计数器
        });

        // 删除用户行的事件委托
        $(document).on('click', '.delete-row-btn', function () {
            $(this).closest('.rm-row').remove(); // 移除当前行

            // 重新遍历所有剩余的 .rm-row 行，并更新其 id 和 name 属性
            $('.rm-row').each(function (index) {
                var row = $(this);
                // 更新行本身的 data-index 属性（可选，但推荐保持同步）
                row.attr('data-index', index);
                row.find('h1').text(`用户 #${index + 1}`); // 更新行标题

                // 更新 id 属性
                row.find('[id^="worker_"]').attr('id', function (i, currentId) {
                    return currentId.replace(/worker_(\d+)_(.*)/, `worker_${index}_$2`);
                });

                // 更新 name 属性
                row.find('[name^="worker["]').attr('name', function (i, currentName) {
                    return currentName.replace(/worker\[(\d+)\]\.(.*)/, `worker[${index}].$2`);
                });

                // 更新 label 的 for 属性
                row.find('label[for^="worker_"]').attr('for', function (i, currentFor) {
                     return currentFor.replace(/worker_(\d+)_(.*)/, `worker_${index}_$2`);
                });
            });

            // 更新全局计数器以反映当前的总行数
            countField = $('.rm-row').length;
        });
    </script>

注意事项与最佳实践

  1. ASP.NET Core asp-for 属性: 在原始问题中提到了 asp-for。asp-for 是 ASP.NET Core Razor Pages/MVC 中的一个 Tag Helper，它会在服务器端生成 id 和 name 属性。客户端 JavaScript 无法直接操作 asp-for，它只能操作最终生成的 id 和 name 属性。因此，本教程的解决方案是直接修改这些由 asp-for 间接生成的 id 和 name 属性。
  2. 事件委托: 使用 $(document).on('click', '.delete-row-btn', function () { ... }); 是处理动态生成元素事件的最佳实践。它将事件监听器绑定到文档对象，通过事件冒泡来捕获动态元素的点击事件，避免了为每个新添加的按钮重新绑定事件。
  3. 性能考虑: 对于包含大量动态行的表单（例如几百行），频繁地遍历和修改 DOM 可能会影响性能。在这种情况下，可以考虑使用虚拟列表、更精细的 DOM 操作策略或在后端处理索引重排。但对于大多数常见场景，上述方法是高效且足够的。
  4. id 和 name 属性的同步: 确保 id 和 name 属性都得到正确更新至关重要。id 属性用于客户端脚本（如 label 的 for 属性）和 CSS 样式，而 name 属性是表单提交时后端接收数据所依赖的。
  5. 正则表达式的精确性: 示例中使用的正则表达式 worker_(\d+)_(.*) 和 worker\[(\d+)\]\.(.*) 假定 id 和 name 遵循特定的模式。如果您的 id 或 name 模式不同，请相应调整正则表达式。
  6. 用户体验: 考虑在删除行时添加一些视觉反馈，例如淡出动画，以提升用户体验。

总结

通过本教程，您学会了如何在 JavaScript 动态生成和删除表单行时，有效地管理和重排输入元素的索引。这种方法确保了表单数据的完整性和后端绑定的正确性，是构建健壮动态表单的关键一环。掌握这一技巧将使您能够创建更加灵活和用户友好的 Web 应用程序。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南

相关文章

如何让表单元素自动继承父容器的布局样式？

如何在页眉上方添加半透明覆盖层盒子

如何让表单元素自动继承父容器的布局样式

CSS 实现元素从顶部隐藏位置平滑动画至容器垂直居中

如何解决外部 CSS 中超链接样式被 Bootstrap 覆盖的问题
PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

css javascript java jquery html js bootstrap ajax 正则表达式

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：控制 WKWebView 中的自适应元素高度：模拟浏览器窗口高度

下一篇：IndexedDB keyPath 特殊字符处理：理解规范与数据重塑

作者最新文章

Angular中ngOnInit内嵌套循环失效的常见原因与正确实现方案

Angular 中嵌套循环在 ngOnInit 里失效的常见原因与正确实践

如何修复 Safari 中缩略图画廊无法切换主图的问题

如何在 AngularJS 中并行执行多个 $http.post 请求

如何为重复渲染的组件中第一个实例单独设置样式

如何为重复渲染的组件中首个实例单独设置样式

JavaScript 中函数参数名与实参名无需一致：理解形参、实参与变量作用域

WebSocket 连接被拒绝：HTTP 403 错误的完整排查与解决方案

如何为 Kendo UI 下拉框实现 HTML5 表单验证与自定义错误提示

如何为 Kendo UI 下拉框实现 HTML5 表单验证与错误提示

热门AI工具

更多
讯飞绘文

讯飞绘文

Hot Flowith

Flowith

Hot 火山引擎

火山引擎

Hot UP简历

UP简历

Hot PixTV

PixTV

Hot 小橡皮AI

小橡皮AI

Hot 豆包大模型

豆包大模型

 DeepSeek

DeepSeek

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

2023.09.12

621

5

jquery怎么操作json
jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

2023.10.13

1196

3

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.10

2302

8

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法，它用于绑定两个事件处理函数，这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容，可以阅读本专题下面的文章。

2023.12.04

2168

12

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容，可以阅读本专题下面的文章。

2023.12.06

493

4

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念，在使用jquery隐藏元素之前，需要先了解css样式中关于元素隐藏的属性，比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2024.02.23

337

5

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示，其实现办法：1、先获取要高亮显示的行，获取搜索的内容，再遍历整行内容，最后添加高亮颜色；2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2024.02.23

826

5

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全，阅读专题下面的文章了解更多详细内容。

2026.01.13

309

11

jQuery下载、CDN引入与版本管理指南
jQuery下载、CDN引入与版本管理指南

本专题围绕 jQuery 下载、CDN 引入、本地部署、版本管理及升级迁移展开，详细介绍 jQuery 官方版本区别、CDN 配置方式、jQuery 4.x 更新内容、Migrate 插件使用及常见加载报错解决方案，适合新手学习、企业项目部署以及老系统维护升级场景。

2026.06.01

243

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
MDPHP(麦迪php框架系统)1.1
PHP 多国语言框架2.0
ujframe简单快速PHP开发框架1.0
php轻量型框架1.0
MyQEE开源PHP多项目及模块化开发框架3.0 RC2
php开源学习型框架CMVC1.2.0
PHP框架Kohana3.3.1

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
TailwindCSS新版快速上手 | v3 v4对比
TailwindCSS新版快速上手 | v3 v4对比

共0课时 | 0人学习

Tailwind CSS 官方文档与安装指南
Tailwind CSS 官方文档与安装指南

共0课时 | 0人学习

Sass 教程
Sass 教程

共14课时 | 1.6万人学习

最新文章

更多
如何为 Kendo UI 下拉框实现 HTML5 表单验证与错误提示
如何为 Kendo UI 下拉框实现 HTML5 表单验证与自定义错误提示
WebSocket 连接被拒绝：HTTP 403 错误的完整排查与解决方案
JavaScript 中函数参数名与实参名无需一致：理解形参、实参与变量作用域
如何为重复渲染的组件中首个实例单独设置样式
如何为重复渲染的组件中第一个实例单独设置样式
如何在 AngularJS 中并行执行多个 $http.post 请求
如何修复 Safari 中缩略图画廊无法切换主图的问题
Angular 中嵌套循环在 ngOnInit 里失效的常见原因与正确实践
Angular中ngOnInit内嵌套循环失效的常见原因与正确实现方案