如何分配動態ID在HTML5 + Thymeleaf

HTML如何分配動態ID在HTML5 + Thymeleaf

<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_ids。

我們可以不使用jQuery嗎？

在此先感謝。

來源

2015-06-22 Java_User

可能重複遞增ID使用jquery]（http://stackoverflow.com/questions/7926484/dynamically-create-divs-with-incremented-id-using-jquery） –

@ChaitanyaGadkari謝謝。但有沒有可能沒有jQuery。像id =「person +'person_id'」。 –

看看[thymeleaf論壇]（http://forum.thymeleaf.org/How-to-get-id-values-dynamicaly-td4026516.html），有一個解決方案使用th：每個和一個計數器來設置輸入元素的id。 – Guillermo

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>

輸出：的[動態創建的div

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

來源

2015-06-22 04:20:58

感謝您的詳細解釋。 –

Np。順便說一句，不知道你是否知道，但如果你找到答案或評論有幫助，你可以大拇指。 –

如何分配動態ID在HTML5 + Thymeleaf

回答

相關問題