Динамическое изменение содержимого блока в JavaScript
Представим, что у Вас на странице есть блоки, текстовое содержимое которых предполагается редактировать. Это может быть, например, список статей в виде таблицы, в котором название статьи можно отредактировать простым нажатием на нее. А после окончания редактирования новое значения через Ajax отсылается на сервер. Далее я Вам покажу пример скрипта, который решает данную задачу.
HTML - разметка
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS Change tag inner Text</title>
<style>
#text {
border: 1px solid rgb(117, 117, 117);
padding: 5px;
}
</style>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<table class="w3-table w3-table-all">
<tr>
<th>Модель</th>
<th>Стоимость</th>
</tr>
<tr>
<td class="editable" data-name="model-1-name">Samsung Galaxy S10</td>
<td class="editable" data-name="model-1-price">$1000.00</td>
</tr>
<tr>
<td class="editable" data-name="model-2-name">Apple 7 Plus</td>
<td class="editable" data-name="model-2-price">$980.50</td>
</tr>
<tr>
<td class="editable" data-name="model-3-name">Huawei P20 Pro</td>
<td class="editable" data-name="model-3-price">$750.99</td>
</tr>
</table>
<p><button class="w3-button w3-round w3-yellow" onclick="document.querySelector('#new-field-popup').style.display='block'">+ Add field</button></p>
<script src="js-dynamic-text-change.js"></script>
</body>
</html>
JavaScript функция
function TagContentChanger(selector,onBlurCallback)
{
let elements = document.querySelectorAll(selector);
function process(element,callback)
{
let bg = element.style.background;
element.addEventListener('click', (event) => {
element.setAttribute('contenteditable',true);
element.style.background = "rgb(113, 179, 240)";
});
element.addEventListener('blur', (event) => {
if( element.hasAttribute('contenteditable') ) {
element.removeAttribute('contenteditable',false);
element.style.background = bg;
callback(element);
}
});
}
for(let element of elements) {
process(element,onBlurCallback);
}
}
function fillEditables(selector)
{
let elements = document.querySelectorAll(selector);
for(let element of elements) {
let value = localStorage.getItem(element.dataset.name);
if( !value ) return;
else element.innerText = value.trim();
}
}
fillEditables('.editable');
TagContentChanger('.editable', (element) => {
localStorage.setItem(element.dataset.name,element.innerText);
});
-
Создано 17.10.2019 13:48:11
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.