<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Динамическое изменение содержимого блока в JavaScript

Динамическое изменение содержимого блока в 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);
});

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.