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

Question

我有一个从 Controller 接收二维数组的表单，并且我已经通过 thymeleaf 生成了该表。

<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 ，以便区分每个单元格，从而检查用户输入的移动的有效性。

Answer 1

您使用属性th:name。 See this for a list of attributes you can use with Thymeleaf 。我从您的代码中具体不知道您想要在 cellValueX 中为 X 使用什么，但可能是这样的？

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