时间戳

首页 > 解决方案 > 如何替换从 onclick 捕获的索引值并将其放入 Thymleaf 对象列表

javascript - 如何替换从 onclick 捕获的索引值并将其放入 Thymleaf 对象列表

问题描述

我们有一个场景，其中我有一个显示所有记录的表格，我们有一个操作列，如果我们单击该按钮，则会出现一个引导模式，并且该模式应该具有为所选记录自动填充的值。

目前，有一个 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>

Javascript函数

<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 函数中捕获的索引值替换为这种形式 th:value="${itrdetails[1].name}

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

标签： javascriptspringthymeleaf

解决方案

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

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

那你应该怎么做。

推荐阅读