Я новичок в Thymeleaf и пытаюсь создать контентную таблицу.
Итак, сейчас у меня есть таблица, в которую я помещаю пользователей после добавления (с помощью контроллера). Когда я нажимаю кнопку «Изменить», столбцы становятся доступными для редактирования (с помощью «contenteditable =« true »), тогда я хочу ПРОВЕРИТЬ текст, который я помещаю туда, и после успешной проверки сохранить его, нажав кнопку« Сохранить »( измените на "contenteditable =" false "). Когда вы видите «Изменить», «Сохранить» скрыто.
Я пытался создать тривиальную проверку для имени, телефона и электронной почты, но это не работает ... А также у меня это есть в «MyFirstName» и других : «Тип аргумента HTMLElement не может быть назначен строке типа параметра» (вероятно, в этом проблема). И я не знаю, как здесь проверить длину телефонного номера ..
Если у вас есть идеи, как заставить его работать, пожалуйста, помогите мне, потому что я очень долго пытаюсь ..
PS Я могу использовать только эту HTML страницу и вставить туда JS -код.
Спасибо !!
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Users</title>
</head>
<body>
...
<table id="myTable">
<tr th:each ="user : ${users}">
<td th:text="${user.id}" ></td> <input type="text" id="message"/>
<td th:text="${user.firstName}" id="firstName" contenteditable="false" ></td>
<td th:text="${user.lastName}" id="lastName" contenteditable="false" ></td>
<td th:text="${user.phoneNumber}" id="phoneNumber" contenteditable="false" ></td>
<td th:text="${user.email}" id="email" contenteditable="false" ></td>
<td>
<button type="button" id="edit_button" onclick="Edit()">Edit</button>
<button type="button" id="save_button" style="display: none" onclick="Save()">Save</button>
</td>
<script type="text/javascript">
$("#edit_button").click(function () {
$("#edit_button").hide();
$("#save_button").show();
});
</script>
<script type="text/javascript">
function Edit() {
let editable = document.querySelectorAll("[contenteditable=false]")
editable[0].setAttribute("contenteditable", true);
editable[1].setAttribute("contenteditable", true);
editable[2].setAttribute("contenteditable", true);
editable[3].setAttribute("contenteditable", true);
}
function Save() {
let editable = document.querySelectorAll("[contenteditable=true]");
let myFirstName = document.getElementById("firstName");
let myLastName = document.getElementById("LastName");
let myPhoneNumber = document.getElementById("phoneNumber");
let myEmail = document.getElementById("email");
let re1 = /^[a-zA-Z]+$/;
let valid1 = re1.test(myFirstName);
let re2 = /^[a-zA-Z]+$/;
let valid2 = re2.test(mySurName);
let re3 = /^\d[\d\(\)\ -]{4,14}\d$/;
let valid3 = re3.test(myPhone);
let re4 = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/;
let valid4 = re4.test(myEmail);
if (valid1 && valid2 && valid3 && valid4){
$("#save_button").hide();
$("#edit_button").show();
editable[0].setAttribute("contenteditable", false);
editable[1].setAttribute("contenteditable", false);
editable[2].setAttribute("contenteditable", false);
editable[3].setAttribute("contenteditable", false);
} else {
alert('Type correct information!');
}
}
</script>
</tr>
</table>
</body>
</html>