JavaScript 动态表单元素索引重排教程-js教程-PHP中文网

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--; // 递减计数器（这并不能解决索引不连续问题）
});

登录后复制

存在的问题：

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

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

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

查看详情

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

解决索引不连续问题的关键是在删除行后，遍历所有剩余的动态行，并根据它们在 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;
});

登录后复制

代码说明：

$(this).closest('.rm-row').remove();: 这行代码用于删除用户点击的删除按钮所在的整行。
$('.rm-row').each(function (index) { ... });: 这是核心。它遍历页面上所有带有 rm-row 类的元素（即所有动态添加的行）。each 方法的回调函数会接收到当前元素的索引 index，这个 index 就是我们需要的新的连续索引（从 0 开始）。
row.find('[id^="worker_"]').attr('id', function (i, currentId) { ... });:
- row.find('[id^="worker_"]')：选择当前行 row 中所有 id 属性以 "worker_" 开头的元素（例如 <input id="worker_0_NameSurname">）。
- .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)。
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。
countField = $('.rm-row').length;: 在完成所有行的索引重排后，更新 countField 以反映当前实际的行数。这样，当再次点击“添加”按钮时，新的行将从正确的下一个索引开始。

完整示例代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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>
</head>
<body>
    <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}</h1>
                    </div>
                    <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"> *</span></label>
                                <input class="form-control label-text" id="worker_${countField}_NameSurname" name="worker[${countField}].NameSurname" type="text" placeholder="请输入姓名"/>
                            </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" placeholder="请输入职位描述"/>
                            </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" style="visibility: hidden;">删除</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++; // 增加计数器
        });

        // 删除用户行的事件委托
        $(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>
</body>
</html>

登录后复制

注意事项与最佳实践

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