如何使用Thymeleaf动态设置HTML <input />名称

时间:2019-05-13 12:16:01

标签: javascript java html thymeleaf

我有一个从控制器接收2D数组的表单,并且已经通过百里香叶生成了表格。

<div class="col-4 offset-4">
  <form id="sudokuBoard" method="post" enctype="application/x-www-form-urlencoded" class="form-group text-center">
    <div class="container">
      <table class="row-eq-height table-striped table-bordered text-center">
        <!--/*@thymesVar id="board" type=""*/-->
        <tr th:each="row: ${board}">
          <td th:each="value: ${row}">
            <div th:switch="${value}" class="col-xs-4">
              <input name="cellValue" th:case="0" class="content form-control input" style="text-align:center" type="text" pattern="[0-9]*" maxlength="1" value="0" onkeypress="return isNumber(event)" oninput="moveMade()">
              <input name="cellValue" th:case="*" class="content form-control input" style="text-align:center;background-color:lightgreen" type="text" th:value="${value}" readonly>
            </div>
          </td>
        </tr>
      </table>
      <div class="gap-10"></div>
      <button type="submit" class="btn btn-outline-primary btn-sm">Check Solution</button>
      <button class="btn btn-outline-primary btn-sm" id="btnNewGame">New Game</button>
      <button class="btn btn-outline-primary btn-sm" id="solveBoard"> Solve Puzzle</button>
    </div>
  </form>
</div>

所有输入字段都具有相同的名称,我想通过Thymeleaf动态分配名称,因此它们变为cellValueX,以便区分每个单元格,以便检查用户输入的移动的有效性。

1 个答案:

答案 0 :(得分:1)

您使用属性th:nameSee this for a list of attributes you can use with Thymeleaf。我从您的代码中不知道您想在X中的cellValueX中使用什么,但是可能是这样的?

<tr th:each="row, y: ${board}">
    <td th:each="value, x: ${row}">
        <input th:name="|cellValue${x.index}_${y.index}|" ... />
    </td>
</tr>