本文旨在解决在动态创建的表单中，删除元素后重新排序输入框索引值的问题。通过 JavaScript 代码示例，详细讲解如何在删除元素后，自动更新剩余元素的 id 和 name 属性，确保表单数据的正确提交和处理。主要方法是利用 jQuery 选择器找到需要更新的元素，并使用 replace 方法更新属性值中的索引。
在动态 Web 应用开发中，经常需要动态创建和删除表单元素。当表单元素包含数组形式的 id 或 name 属性时（例如 worker[1].NameSurname），删除中间的元素会导致索引不连续，影响数据提交和处理。本文将提供一种使用 JavaScript 和 jQuery 解决此问题的方法。
动态创建表单元素
假设我们有一个按钮，点击后会动态添加包含输入框的行。每个输入框的 id 和 name 属性都包含一个递增的索引。
<div id="inputFieldsContainer">
<!-- 动态添加的行将在这里显示 -->
</div>
<button id="addUSers">添加用户</button>let countField = 1;
$("#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 runat="server" 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" id="deleteWorkRow" class="btn btn-danger"><span class="fa fa-trash"></span></button>';
user_row += '</fieldset>';
user_row += '</div>';
user_row += '</div>';
user_row += '</div>';
$('#inputFieldsContainer').append(user_row);
countField++;
/*user_row += ''*/
$(document).on('click', '#deleteWorkRow', function () {
$(this).closest('.rm-row').remove();
countField--;
});
})删除元素并重新排序索引
当点击删除按钮时，我们需要删除对应的行，并重新调整剩余行的索引。以下是实现此功能的 JavaScript 代码：
立即学习“Java免费学习笔记（深入）”；
$(document).on('click', '#deleteWorkRow', function () {
$(this).closest('.rm-row').remove();
countField--;
// Rebuild the rows with updated id and name attributes
$('.rm-row').each(function (index) {
var row = $(this);
row.find('[id^="worker["]').attr('id', function (i, id) {
return id.replace(/\[(\d+)\]/, '[' + index + ']');
});
row.find('[name^="worker["]').attr('name', function (i, name) {
return name.replace(/\[(\d+)\]/, '[' + index + ']');
});
});
});这段代码首先删除点击的行，然后使用 .rm-row 选择器找到所有剩余的行。对于每一行，它使用 find('[id^="worker["]') 和 find('[name^="worker["]') 选择器找到 id 和 name 属性以 "worker[" 开头的元素。然后，使用 attr() 方法和回调函数来更新这些属性的值。回调函数中的 replace(/\[(\d+)\]/, '[' + index + ']') 使用正则表达式将属性值中的索引替换为新的索引。
注意事项
- 选择器准确性： 确保选择器 '.rm-row' 和 '[id^="worker["]' 能准确匹配到需要更新的元素。
- 索引起始值： 上述代码的索引从 0 开始。如果需要从 1 开始，可以在 index 的基础上加 1。
- 性能优化： 如果表单元素非常多，频繁的 DOM 操作可能会影响性能。可以考虑使用更高效的算法或延迟更新。
总结
通过以上步骤，我们可以实现动态表单中删除元素后自动更新索引的功能，确保表单数据的正确性和一致性。这种方法简单易懂，适用于大多数动态表单场景。在实际应用中，可以根据具体需求进行适当调整和优化。
