如何在 HTML5+Thymeleaf 中分配动态 id答案

【问题标题】：How to assign dynamic id in HTML5+Thymeleaf如何在 HTML5+Thymeleaf 中分配动态 id
【发布时间】：2015-06-22 04:05:41
【问题描述】：

HTML

<form id="searchPersonForm" action="#" th:object="${person}" method="post">
<input type="text" class="form-control" id="person_id" th:field="*{person_id}"></input>
<input type="text" class="form-control" id="child_id" th:field="*{child_id}"></input>
</form>

如何分配动态 id，如 person_id_100、person_id_200... 和 child_id_100、child_id_200... 值 100、200 是实际的 person_id。

我们可以不用 jQuery 吗？

提前致谢。

【问题讨论】：

Dynamically create divs with incremented id using jquery的可能重复
@ChaitanyaGadkari 谢谢。但是有没有可能没有jQuery。比如 id="person + 'person_id'"。
看看 [thymeleaf 论坛](forum.thymeleaf.org/…)，有一个解决方案使用 th:each 和一个计数器来为输入元素设置 id。
@GuillermoFernández。谢谢。我会尝试解决方案。

标签： html thymeleaf

【解决方案1】：

如果你打算认真一点，jQuery 可能值得学习，但这可以通过一个简单的 javascript 文件来完成：

//saved as javascript.js

var formId = "searchPersonForm";
var inputArray = [];
for(var x=0;x < 10;x++){
    var newId = x*100
    var newInput = document.createElement("input")
    newInput.id = "person_id_" + newId
    inputArray.push(newInput);
}
for(var x=0;x < inputArray.length;x++){
    document.getElementById(formId).appendChild(inputArray[x])
    console.log(inputArray[x].id)
}

在表单实例化后的某个时间点将脚本包含在您的页面中：

<html>
<head>
</head>
<body>
<form id="searchPersonForm" action="#" th:object="${person}" method="post">
<input type="text" class="form-control" id="person_id" th:field="*{person_id}"></input>
<input type="text" class="form-control" id="child_id" th:field="*{child_id}"></input>
<script src="javascript.js"></script>
</form>
</body>

输出：

person_id_0
javascript.js:11 person_id_100
javascript.js:11 person_id_200
javascript.js:11 person_id_300
javascript.js:11 person_id_400
javascript.js:11 person_id_500
javascript.js:11 person_id_600
javascript.js:11 person_id_700
javascript.js:11 person_id_800
javascript.js:11 person_id_900

【讨论】：

Np。顺便说一句，不确定您是否知道，但如果您发现答案或评论有帮助，您可以点赞。