Редактируемые строки в таблице

Question

Делаю простую страницу по отображению списка клиентов. Вверху поля для ввода имени и телефона, внизу отображается список клиентов, при нажатии кнопки новый клиент добавляется в список.

HTML страница

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>PS-клиенты</title>
    <link rel="stylesheet" th:href="@{/styles.css}" />

</head>

<body>
<br>
<br>
<form method="post" th:action="@{/client}" th:object="${client}">
    <div>

            <input id="name" placeholder="введите имя" type="text" th:field="*{name}"/>
            <input id="phone" placeholder="введите телефон" type="text" th:field="*{phone}"/>
        <input type="submit" value="создать клиента">
        <br>
        <span class = "validationError"

              th:if="${#fields.hasErrors('name')}"
              th:errors="*{name}">  </span>
        <br>
        <span class = "validationError"

              th:if="${#fields.hasErrors('phone')}"
              th:errors="*{phone}">  </span>
    </div>
</form>
<br>
<br>
<br>
<div>
    <table>

        <thead>
        <tr>
            <th> Имя</th>
            <th> Телефон</th>
            <th> Комментарий</th>
            <th>  Статус</th>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${clients.empty}">
            <td colspan="4"> Пока нет ни одного клиента</td>
        </tr>
        <tr th:each="client : ${clients}">
            <td> <span th:text="${client.name}"> Имя </span></td>
            <td> <span th:text="${client.phone}"> Телефон </span></td>
            <td> <span th:text="${client.comment}"> Комментарий</span></td>
            <td> <label for="dropDownList"></label>
                <select class="form-control" id="dropDownList">
                    <option value="0">новый</option>
                    <option value="1">постоянный</option>
                    <option value="2">стоп лист</option>
                    <option th:each="option : ${options}" th:value="${option}" th:text="${option}"></option>

                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Пытаюсь сделать строки в таблице кликабельными, чтоб по 2ому щелчку мыши можно было отредактировать содержимое (щелкнули на номер 2 раза и изменили его), но у меня не выходит. Более того, есть сомнения, что это вообще возможно при использовании Thymeleaf. Может кто-нибудь посоветовать способ редактировать уже внесенные записи по щелчку?

БЛОГ НА HUSL

Редактируемые строки в таблице

Ответы (0 шт):