引言
在现代 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 = `
`;
// 将新行添加到容器
$('#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] 丢失，或者数据绑定失败。为了避免这种情况，我们需要在删除行后重新调整所有剩余行的索引。
解决方案：删除后重排索引
解决索引不连续问题的关键是在删除行后，遍历所有剩余的动态行，并根据它们在 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_" 开头的元素（例如 ）。
- .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 以反映当前实际的行数。这样，当再次点击“添加”按钮时，新的行将从正确的下一个索引开始。
完整示例代码
为了方便理解，我们将添加和删除的逻辑整合到一个完整的示例中。
动态表单索引重排示例
动态用户列表
注意事项与最佳实践
- 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 模式不同，请相应调整正则表达式。
- 用户体验: 考虑在删除行时添加一些视觉反馈，例如淡出动画，以提升用户体验。
总结
通过本教程，您学会了如何在 JavaScript 动态生成和删除表单行时，有效地管理和重排输入元素的索引。这种方法确保了表单数据的完整性和后端绑定的正确性，是构建健壮动态表单的关键一环。掌握这一技巧将使您能够创建更加灵活和用户友好的 Web 应用程序。
