Javascript 多级HTML表单

想象一下，我使用Play Framework有一个这样的底层模型布局，不相关：

case class Resume(
                 id: Option[String],
                 surname: String,
                 firstName: String,
                 experience: List[Experience],
                 education: List[Education]
                   )

case class Experience(
                     employer: String,
                     responsibilities: String,
                     position: String,
                     projectDetails: String,
                     projectValue: String
                       )

case class Education(
                    study: String,
                    institution: String
                      )

简历模型是用户需要填写的模型。我将如何着手为它设计HTML表单？我需要一些JS添加一个新的经验和教育块的需求，如果我的网站访问者想添加一个额外的经验或教育块。我想知道，我怎样才能最好地把它转换成HTML？使用html表单名称数组更好吗？还是我应该将所有内容分组到DIV中，然后使用Javascript构建一个JSON对象并将其提交给服务器

我会使用HTML名称数组执行类似的操作：

experience[0][employer]
experience[0][responsibilities]
experience[0][position]
experience[0][projectDetails]
experience[0][projectDetails]

。。。然后，当用户按下tab或其他按钮时，添加：

experience[1][employer]
experience[1][responsibilities]
experience[1][position]
experience[1][projectDetails]
experience[1][projectDetails]

---

或者有更好的方法解决这个问题吗？

您可以使用jQuery方法。appendhtmlString向现有元素添加更多项

因此，如果您有一个表单，其中已经包含了项，那么您可以有一个按钮，当按下该按钮时，它将使用.size计算已经添加的项的数量，然后再附加一些输入

$'addNew'。单击函数{ var html=； 变量numberded=$'.experience'.size； $'myForm'.appendhtml.replace/\{0\}/g，编号； }; 增加经验 $'addNew'。单击函数{ var html=； 变量numberded=$'.experience'.size； $'myForm'.appendhtml.replace/\{0\}/g，编号； }; 增加经验

---

无论哪种方法都很有效，我没有考虑过使用大小来确定数字：