如何替换从onclick捕获的索引值并将其放置到对象的thyymleaf List中

Question

我们有一个场景，我有一个表，其中显示所有的记录，我们有一个动作列，其中，如果我们点击那个按钮，一个引导模式出现，该模式应该有值自动填充所选的记录。

目前，有一个onclick事件，它将捕获特定记录的id，这是学生对象列表的索引。

<button type="button" class="btn btn-secondary" data-mdb-ripple-color="dark"
th:data-parameter1="${itDetail.itdetailsId}"
onclick="openModel(this.getAttribute('data-parameter1'));">
<i class=" fas fa-edit"></i>
</button>

<<p>Javascript函数/strong>

<script th:inline="javascript">
function openModel(i) {
//alert(i);       // at this we are able to capture the index value of selected record
$('#modal-1').show();
}
</script>

弹出模态

<div class="form-outline">
<input type="text" id="formControlLg1" class="form-control form-control-lg" **th:value="${itdetails[1].name}"** />  
// *Here the index value is hardcoded as 1 , this i need to substitute it from javascript openModel function i*
<label class="form-label" for="formControlLg">Name</label>
</div>

是否有任何方法来替代在OpenModal中捕获的索引值函数的形式为:value="${itrdetails[1].name}

或者有更好的方法来实现这一点!

Answer 1

最简单的方法是预设值，然后打开模型。

<script th:inline="javascript">
function openModel(i) {
//alert(i);          // at this we are able to capture the index value of selected record
document.getElementById("formControlLg1").value = "${itdetails[i].name}";
$('#modal-1').show();
}
</script>

弹出模型

<div class="form-outline">
<input type="text" id="formControlLg1" class="form-control form-control-lg" />
<label class="form-label" for="formControlLg">Name</label>
</div>

你应该这样做。