Сохранение строк в таблице HTML с использованием функций Javascript

Вопрос или проблема

Ответ или решение

Сохранение строк в таблице HTML с использованием JavaScript

Введение

Ваше задание состоит в создании веб-приложения, которое позволяет пользователям динамически добавлять строки в таблицу с выпадающими списками, полями для ввода дат и текстовыми полями. Однако, после обновления страницы все добавленные строки исчезают, что создает проблемы с пользовательским опытом. Давайте рассмотрим, как можно организовать хранение данных в вашем приложении, чтобы они сохранялись даже после перезагрузки страницы.

Проблема

На первый взгляд, ваша текущая реализация не обеспечивает постоянство данных. Когда вы добавляете строки, они существуют только в памяти устройства. При обновлении страницы все данные теряются, поскольку не сохраняются на сервере или в браузере.

Решение

Для решения данной проблемы необходимо использовать одни из следующих подходов:

1. Local Storage: Это встроенный механизм браузера для хранения данных. Он позволяет сохранять данные в формате ключ-значение и они сохраняются даже после обновления страницы.

2. Серверная база данных: Если ваше веб-приложение будет обрабатывать большие объемы данных или данные, требующие безопасности, вам следует рассмотреть возможность использования бэкенда с базой данных.

Пример решения с Local Storage

Шаг 1: Создание HTML-структуры

Предположим, у вас есть простая таблица, в которую вы добавляете строки:

<table id="myTable">
    <tbody>
        <tr>
            <td><select><option>Option 1</option><option>Option 2</option></select></td>
            <td><input type="date"></td>
            <td><input type="text"></td>
            <td><button onclick="removeRow(this)">Remove</button></td>
        </tr>
    </tbody>
</table>
<button onclick="addRow()">Add Row</button>
<button onclick="saveData()">Save Data</button>

Шаг 2: JavaScript для управления строками

function addRow() {
    const table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
    const newRow = table.insertRow(table.rows.length);

    const cell1 = newRow.insertCell(0);
    cell1.innerHTML = `<select><option>Option 1</option><option>Option 2</option></select>`;

    const cell2 = newRow.insertCell(1);
    cell2.innerHTML = `<input type="date">`;

    const cell3 = newRow.insertCell(2);
    cell3.innerHTML = `<input type="text">`;

    const cell4 = newRow.insertCell(3);
    cell4.innerHTML = `<button onclick="removeRow(this)">Remove</button>`;

    loadData(); // загрузить сохраненные данные при добавлении строки
}

function removeRow(button) {
    const row = button.parentNode.parentNode;
    row.parentNode.removeChild(row);
    saveData(); // сохраняем данные после удаления строки
}

function saveData() {
    const tableData = [];
    const table = document.getElementById("myTable").getElementsByTagName('tbody')[0];

    for (let row of table.rows) {
        const rowData = {
            select: row.cells[0].getElementsByTagName('select')[0].value,
            date: row.cells[1].getElementsByTagName('input')[0].value,
            text: row.cells[2].getElementsByTagName('input')[0].value
        };
        tableData.push(rowData);
    }

    localStorage.setItem('tableData', JSON.stringify(tableData));
}

function loadData() {
    const storedData = localStorage.getItem('tableData');
    if (storedData) {
        const tableData = JSON.parse(storedData);
        document.getElementById("myTable").getElementsByTagName('tbody')[0].innerHTML = ''; // очистка таблицы
        for (const item of tableData) {
            addRow();
            const lastRow = document.getElementById("myTable").getElementsByTagName('tbody')[0].lastChild;
            lastRow.cells[0].getElementsByTagName('select')[0].value = item.select;
            lastRow.cells[1].getElementsByTagName('input')[0].value = item.date;
            lastRow.cells[2].getElementsByTagName('input')[0].value = item.text;
        }
    }
}

// Загрузка данных при первом запуске страницы
window.onload = loadData;

Объяснение кода

1. Добавление строк: Функция addRow() добавляет новую строку в таблицу и одновременно загружает сохраненные данные.
2. Удаление строк: Функция removeRow(button), удаляющая строку и вызывающая saveData(), чтобы обновить сохраненные данные.
3. Сохранение данных: Функция saveData() перебирает строки таблицы, собирает данные и сохраняет их в Local Storage.
4. Загрузка данных: Функция loadData() выгружает данные из Local Storage и заполняет таблицу.

Заключение

Ваше приложение теперь может сохранять строки таблицы, даже если пользователь перезагрузит страницу. Такой подход улучшит опыт пользователя и сделает ваше веб-приложение более функциональным. Если у вас возникнут дополнительные вопросы или нужна помощь с другими аспектами вашего проекта, не стесняйтесь обращаться!