Как динамически устанавливать имена HTML <input>с Thymeleaf - PullRequest
0 голосов
/ 13 мая 2019

У меня есть форма, которая получает двумерный массив от контроллера, и я сгенерировал таблицу через тимелист.

<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 Ответ

1 голос
/ 13 мая 2019

Вы используете атрибут th:name. См. Здесь список атрибутов, которые вы можете использовать с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...