如何将动态生成的表单字段数据保存到Cloud Firestore？

我来帮你搞定这个问题！你现在遇到的核心问题是动态生成的字段用了重复的ID，而且没有统一的方式去遍历所有输入项，导致没法批量收集数据存到Firestore。下面是完整的优化方案，一步步来：

第一步：优化HTML结构 #

首先要改掉重复的ID（ID必须唯一，动态克隆会导致冲突），改用类名来标识输入字段，同时给每个用户的行添加统一的类，方便后续遍历。另外把模板里的序号改成可动态更新的：

<!-- 隐藏的克隆模板 -->
<div class="row cloneDefault user-row">
  <div class="form-group col-md-1">
    <br />
    <h4 style="text-align:right" class="row-number">1.</h4>
  </div>
  <div class="form-group col-md-1">
    <label class="control-label">First name</label>
    <input type="text" value='' class="form-control first-name"/>
  </div>
  <div class="form-group col-md-2">
    <label class="control-label">last name</label>
    <input type="text" value='' class="form-control last-name"/>
  </div>
  <i class="remove">remove</i>
</div>

<form class="frm">
  <!-- 初始显示的第一行 -->
  <div class="row user-row">
    <div class="form-group col-md-1">
      <br />
      <h4 style="text-align:right" class="row-number">1.</h4>
    </div>
    <div class="form-group col-md-1">
      <label class="control-label">First name</label>
      <input type="text" value='' class="form-control first-name"/>
    </div>
    <div class="form-group col-md-2">
      <label class="control-label">last name</label>
      <input type="text" value='' class="form-control last-name"/>
    </div>
    <i class="remove">remove</i>
  </div>
  <i class="add"> Add </i>
</form>

<style>
.cloneDefault{ display: none; }
.remove { cursor: pointer; color: red; margin-left: 10px; margin-top: 25px; display: inline-block; }
.add { cursor: pointer; color: green; margin-top: 20px; display: inline-block; }
</style>

第二步：改进JavaScript克隆逻辑 #

接下来要优化克隆代码，确保新增的行序号正确递增，并且清空输入框的内容（避免复制模板里的默认值），同时删除行后还要重新更新所有序号：

$(document).ready(function() {
  $(".add").click(function() {
    // 获取当前已有多少个用户行，计算新行的序号
    const rowCount = $(".frm .user-row").length + 1;
    
    // 克隆模板，true表示复制元素上的事件绑定
    const newRow = $(".cloneDefault").clone(true);
    
    // 更新新行的序号
    newRow.find(".row-number").text(`${rowCount}.`);
    
    // 清空新行的输入框值
    newRow.find("input").val("");
    
    // 移除隐藏类，插入到最后一行之前
    newRow.removeClass("cloneDefault").insertBefore(".frm > .user-row:last-child");
    
    return false;
  });

  // 删除行的逻辑，保留至少一行（可选，根据你的需求调整）
  $(document).on('click', '.remove', function() {
    const totalRows = $(".frm .user-row").length;
    if(totalRows > 1) {
      $(this).parent().remove();
      // 删除后重新更新所有行的序号
      $(".frm .user-row").each(function(index) {
        $(this).find(".row-number").text(`${index + 1}.`);
      });
    } else {
      alert("至少要保留一行用户信息哦");
    }
  });
});

第三步：收集所有数据并保存到Firestore #

现在可以通过遍历所有.user-row元素，批量收集每一行的输入值，然后选择适合的方式保存到Firestore：

方案1：逐个保存每个用户到Firestore #

如果每个用户是独立的文档，用这个方式：

function saveUsers() {
  // 遍历所有用户行
  $(".frm .user-row").each(function() {
    const firstName = $(this).find(".first-name").val().trim();
    const lastName = $(this).find(".last-name").val().trim();
    
    // 跳过空行（如果用户没填就点击保存）
    if(firstName || lastName) {
      firebase.firestore().collection("users").add({
        firstName: firstName,
        lastName: lastName
      }).then(() => {
        console.log("用户数据保存成功！");
      }).catch(error => {
        console.error("保存失败：", error);
      });
    }
  });
}

// 你可以给页面加个保存按钮，绑定这个函数：
// <button class="save-btn">保存所有用户</button>
// $(".save-btn").click(saveUsers);

方案2：把所有用户作为数组保存到一个文档 #

如果要把这些用户作为一个组（比如团队成员）存到同一个文档，用这个方式：

function saveUserGroup() {
  const users = [];
  
  $(".frm .user-row").each(function() {
    const firstName = $(this).find(".first-name").val().trim();
    const lastName = $(this).find(".last-name").val().trim();
    
    if(firstName || lastName) {
      users.push({
        firstName: firstName,
        lastName: lastName
      });
    }
  });
  
  if(users.length === 0) {
    alert("请至少填写一个用户的信息！");
    return;
  }
  
  firebase.firestore().collection("userGroups").add({
    members: users,
    createdAt: firebase.firestore.FieldValue.serverTimestamp()
  }).then(() => {
    console.log("用户组数据保存成功！");
  }).catch(error => {
    console.error("保存失败：", error);
  });
}

关键改进点总结 #

• 用类名代替ID：彻底解决动态元素的ID冲突问题，同时方便批量选择元素。
• 统一行标识：.user-row类让我们可以轻松遍历所有用户输入行，不管新增多少行都能处理。
• 动态序号更新：提升用户体验，让每一行的编号清晰准确。
• 批量数据收集：通过遍历行来获取所有输入值，完美适配动态新增的字段。

内容的提问来源于stack exchange，提问作者Stone