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免费学习笔记（深入）”；
// 初始的删除逻辑（有缺陷）
$(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 属性可能会有轻微的性能开销。但在大多数常见的表单场景中，这种开销是微不足道的，且用户体验良好。
7. 总结
通过本教程介绍的 jQuery each 方法结合正则表达式的策略，您可以有效地管理动态生成表单元素的索引。这不仅确保了表单数据在删除操作后依然能够保持连续性和正确性，也极大地简化了后端的数据处理逻辑。掌握这种技术对于开发交互性强、数据结构复杂的 Web 表单至关重要。
