本文详细介绍了在 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 = ` `; // 将新行添加到容器 $('#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 以反映当前实际的行数。这样，当再次点击“添加”按钮时，新的行将从正确的下一个索引开始。
完整示例代码
为了方便理解，我们将添加和删除的逻辑整合到一个完整的示例中。
动态表单索引重排示例 .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; }let countField = 0; // 初始索引从0开始 // 添加用户行的函数 $("#addUsers").click(function () { var user_row = `动态用户列表
`; $('#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; });用户 #${countField + 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 属性。事件委托: 使用 $(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 应用程序。
以上就是JavaScript 动态表单元素索引重排教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/28745.html
微信扫一扫 
支付宝扫一扫 
