JavaScript 动态表单：删除行后重新排序输入元素索引的教程-js教程-PHP中文网

JavaScript 动态表单：删除行后重新排序输入元素索引的教程

本教程详细讲解如何在 JavaScript/jQuery 动态生成的表单中，实现删除行后自动重新排序输入元素的 id 和 name 属性索引。通过 jQuery 的 each 方法和正则表达式，我们能高效地遍历并更新现有行的索引，确保表单数据在删除操作后依然保持连续性和正确性，从而避免后端绑定或数据处理时出现索引错乱问题。

1. 引言

在现代 web 应用开发中，动态生成表单元素是一种常见需求，尤其是在需要用户添加或删除多个相似数据项（如联系人信息、产品列表）时。为了方便后端处理和数据绑定，这些动态生成的输入元素通常会带有基于索引的 id 和 name 属性，例如 worker[0].namesurname、worker[1].jobdescription 等。然而，当用户删除中间的某一行时，原有的索引序列就会被打乱（例如，删除 worker[1] 后，剩下 worker[0] 和 worker[2]）。这可能导致后端数据绑定失败或数据处理逻辑出错。本教程将指导您如何使用 javascript 和 jquery 优雅地解决这一问题，确保在删除行后，所有剩余行的索引都能自动重新排序，保持连续性。

2. 问题阐述：动态索引的挑战

考虑一个场景：我们动态创建了三行用户输入，其 name 属性分别为 worker[0].NameSurname、worker[1].NameSurname 和 worker[2].NameSurname。如果用户删除了第二行（worker[1]），那么剩下的两行将是 worker[0] 和 worker[2]。对于期望接收一个连续数组的后端服务来说，这种非连续的索引会导致数据解析错误。因此，我们需要在删除行后，将 worker[2] 自动更新为 worker[1]，从而恢复索引的连续性。

3. 初始实现：动态添加行

首先，我们来看如何动态添加带有索引的输入元素。这里使用 jQuery 来监听一个“添加用户”按钮的点击事件，并生成新的行。

let countField = 0; // 从0开始计数，对应数组索引
$("#addUSers").click(function () {
    var user_row = '<div class="row rm-row">';

    user_row += '<div class="col-lg-3 col-md-12 col-sm-12">';
    user_row += '<h1></h1>';
    user_row += '</div>';

    user_row += '<div id="workin_user' + countField + '" class="col-lg-9 d-flex gap-1">';

    user_row += '<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">';
    user_row += '<fieldset>';
    user_row += '<label for="worker_' + countField + '" class="label-text">Name Surname<span class="text-danger"> *</span></label>';
    user_row += '<input class="form-control label-text" id="worker[' + countField + '].NameSurname" name="worker[' + countField + '].NameSurname" type="text" />';
    user_row += '</fieldset>';
    user_row += '</div>';

    user_row += '<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">';
    user_row += '<fieldset>';
    user_row += '<label for="JobDescription_' + countField + '"class="label-text">Job Description<span class="text-danger"> *</span></label>';
    user_row += '<input class=" form-control label-text" id="worker[' + countField + '].JobDescription" name="worker[' + countField + '].JobDescription" type="text" />';
    user_row += '</fieldset>';
    user_row += '</div>';

    user_row += '<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 mt-lg-4 mt-md-5">';
    user_row += '<fieldset>';
    user_row += '<label for="deleteWorkRow" class="label-text">DELETE </label>';
    user_row += '<button type="button" class="btn btn-danger delete-row-btn"><span class="fa fa-trash"></span></button>'; // 注意这里将id改为class，避免重复ID
    user_row += '</fieldset>';
    user_row += '</div>';

    user_row += '</div>';
    user_row += '</div>';

    $('#inputFieldsContainer').append(user_row);
    countField++;
});

登录后复制

在上述代码中：

countField 变量用于跟踪当前行的索引。
每次点击“添加用户”按钮，都会生成一个带有 .rm-row 类的 div 块，其中包含两个输入字段和一个删除按钮。
输入字段的 id 和 name 属性被设置为 worker[countField].NameSurname 和 worker[countField].JobDescription，确保了每个字段的唯一性和索引。
重要提示： 为了避免 HTML 中重复 id 属性，我们将删除按钮的 id="deleteWorkRow" 改为 class="delete-row-btn"。事件委托将基于这个类进行监听。

4. 删除行的初步尝试及不足

一个常见的删除行逻辑是直接移除 DOM 元素，并简单地递减 countField。

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

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

// 初始的删除逻辑（有缺陷）
$(document).on('click', '.delete-row-btn', function () { // 监听class
    $(this).closest('.rm-row').remove();
    countField--; // 这只能影响下一个新增元素的索引，不能重新排序现有元素
});

登录后复制

这种方法虽然能删除行，但 countField-- 仅影响下次添加新行时的索引，无法解决现有行索引不连续的问题。例如，如果您有索引为 0, 1, 2 的三行，删除索引为 1 的行后，页面上剩下 0 和 2。countField 变为 2，但 worker[2] 仍然存在，这与我们的期望不符。

5. 解决方案：使用 jQuery 重新排序索引

解决索引不连续问题的核心在于，在删除任何一行后，遍历所有剩余的行，并根据它们在 DOM 中的新位置重新分配连续的索引。

// 修正后的删除逻辑
$(document).on('click', '.delete-row-btn', function () { // 监听class
    $(this).closest('.rm-row').remove(); // 删除当前行

    // 重新构建所有行的 id 和 name 属性
    $('.rm-row').each(function (index) {
        var row = $(this);
        // 更新所有以 'worker[' 开头的 id 属性
        row.find('[id^="worker["]').attr('id', function (i, current_id) {
            // 使用正则表达式替换 id 中的数字索引
            return current_id.replace(/\[(\d+)\]/, '[' + index + ']');
        });
        // 更新所有以 'worker[' 开头的 name 属性
        row.find('[name^="worker["]').attr('name', function (i, current_name) {
            // 使用正则表达式替换 name 中的数字索引
            return current_name.replace(/\[(\d+)\]/, '[' + index + ']');
        });

        // 如果有其他需要更新索引的元素，如父div的id，也可以在这里处理
        // 例如：更新父 div 的 id，如果它也依赖索引
        row.find('[id^="workin_user"]').attr('id', 'workin_user' + index);
    });

    // 更新 countField 以反映当前行的数量，确保后续添加的元素索引正确
    countField = $('.rm-row').length;
});

登录后复制

代码详解：

$(this).closest('.rm-row').remove();: 这行代码首先找到被点击删除按钮最近的父级 .rm-row 元素，并将其从 DOM 中移除。
$('.rm-row').each(function (index) { ... });: 这是解决方案的核心。它遍历所有当前存在于页面上的 .rm-row 元素。each 方法的回调函数会接收两个参数：index（当前元素在集合中的索引，从 0 开始）和 element（当前 DOM 元素）。我们主要利用 index 来作为新的连续索引。
row.find('[id^="worker["]').attr('id', function (i, current_id) { ... });:
- row.find('[id^="worker["]'): 这是一个 jQuery 选择器，用于在当前 row 内部查找所有 id 属性以 worker[ 开头的元素（即我们的输入字段）。
- .attr('id', function (i, current_id) { ... }): attr() 方法不仅可以设置固定值，还可以接受一个函数。这个函数会在每个匹配元素上执行，并接收两个参数：i（元素在匹配集合中的索引）和 current_id（该元素当前的 id 属性值）。函数的返回值将作为新的 id 值。
- current_id.replace(/\[(\d+)\]/, '[' + index + ']'): 这是关键的正则表达式替换部分。
  - \[(\d+)\]: 匹配方括号 [] 中包含一个或多个数字 \d+ 的模式。() 创建了一个捕获组，可以捕获到方括号内的数字。
  - replace() 方法将匹配到的模式替换为 [ + index + ]。这里的 index 就是 each 循环提供的当前行的连续索引。
row.find('[name^="worker["]').attr('name', function (i, current_name) { ... });: 这行代码与更新 id 属性的逻辑完全相同，只是针对 name 属性进行操作。
row.find('[id^="workin_user"]').attr('id', 'workin_user' + index);: 这是一个可选的增强，如果您的行容器或其他元素也依赖于索引，可以使用类似的方式更新它们的 id。
countField = $('.rm-row').length;: 在所有行重新索引完成后，将 countField 更新为当前页面上 .rm-row 元素的总数。这确保了下次点击“添加用户”按钮时，新行将从正确的下一个索引开始。

6. 关键注意事项与最佳实践

关于 asp-for 属性： 原始问题提到 asp-for 属性造成了问题。asp-for 是 ASP.NET Core MVC 中的一个标签助手，它在服务器端生成 HTML 元素的 id 和 name 属性。如果您在使用 asp-for，那么在客户端通过 JavaScript 直接修改 id 和 name 属性是可行的，因为 asp-for 的作用是在服务器端渲染时完成的。解决方案直接修改了客户端的 id 和 name，绕过了 asp-for 在客户端的影响。
选择器效率： 使用 [id^="worker["] 和 [name^="worker["] 这样的属性选择器是有效的，它能精确匹配到需要更新的输入字段。
正则表达式的运用： 正则表达式 \[(\d+)\] 是一个非常强大的工具，用于匹配和替换字符串中的动态数字部分。理解其工作原理对于处理这类问题至关重要。
事件委托： $(document).on('click', '.delete-row-btn', function () { ... }); 是一个最佳实践，用于处理动态添加的元素上的事件。它将事件监听器附加到 document 对象，然后通过事件冒泡机制来捕获并处理目标元素的点击事件，无论目标元素何时被添加到 DOM 中。
性能考量： 对于包含大量（例如数百个）动态行的表单，每次删除后遍历并更新所有剩余行的 DOM 属性可能会有轻微的性能开销。但在大多数常见的表单场景中，这种开销是微不足道的，且用户体验良好。