0

Проблема - нужно обновлять таблицу в зависимости от полученных данных.

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

удалять все старые данные и записывать новые (обновлять)

. Как это можно сделать? (без jquery и т.д, стандартными способами)

<!DOCTYPE HTML>

<html style="font-family: Helvetica;">

<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid green;
            margin: auto;
        }

        td,
        th {
            text-align: center;
            border: 1px solid #dddddd;
            padding: 8px;
        }
    </style>
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <meta charset="utf-8">
    <h1 style="text-align: center;"> Умный тупой подвал v0.1 beta </h1>
</head>

<body>
    <div style="font-size:24px;">
        <table id = "sensors_view">
            <tr>
                <td>Название датчика</td>
                <td>Температура</td>
                <td>Влажность</td>
                <td>По ощущениям</td>
            </tr>
        </table>
    </div>

    <div style="font-size:24px;">
        <table id = "basic_view_table">
            <tr>
                <td>Заряд аккумулятора</td>
                <td>Уровень сигнала</td>
                <td>Время работы</td>
                <td>Подключен к wifi</td>
            </tr>
        </table>
    </div>

    <script>

        update_sensor_values();

        var sensors_table = document.getElementById("sensors_view");
        var info_table = document.getElementById("basic_view_table");

        function update_sensor_values() {

            fetch('api')
                .then(res => res.json())
                .then(data => {

                    console.log('data: ', data)

                    let wifi_name = data.wifi_name;
                    let rssi = data.rssi;
                    let uptime = data.uptime;
                    let battery_voltage = data.battery_voltage;
                    let normal_uptime = new Date(uptime * 1000).toISOString().substr(11, 8)

                    let sensor_values = data.sensors;

                    sensor_values.forEach((sensor) => {

                        var td;
                        var tr = document.createElement('tr');
                        
                        td = document.createElement('td');
                        td.innerHTML=sensor.name;
                        tr.appendChild(td);

                        td = document.createElement('td');
                        td.innerHTML=sensor.temperature;
                        tr.appendChild(td);

                        td = document.createElement('td');
                        td.innerHTML=sensor.himidity;
                        tr.appendChild(td);

                        td = document.createElement('td');
                        td.innerHTML=sensor.heat_index;
                        tr.appendChild(td);

                        sensors_table.append(tr);
                    });

                    info_table.append("<tr><td>"+battery_voltage+"</td><td>"+rssi+"</td><td>"+normal_uptime+"</td><td>"+wifi_name+"</td></tr>")

                    setTimeout(update_sensor_values, 2000);
                })
                .catch(e => {
                    console.log('Error: ', e);
                    setTimeout(update_sensor_values, 2000);
                });
        }
    </script>
</body>

</html>

1 ответ 1

1

Думаю как-то так, писал с телефона, извините за форматирование.

update_sensor_values();

        var sensors_table = document.getElementById("sensors_view");
        var info_table = document.getElementById("basic_view_table");

        function update_sensor_values() {

            fetch('api')
                .then(res => res.json())
                .then(data => {

                    console.log('data: ', data)

                    let wifi_name = data.wifi_name;
                    let rssi = data.rssi;
                    let uptime = data.uptime;
                    let battery_voltage = data.battery_voltage;
                    let normal_uptime = new Date(uptime * 1000).toISOString().substr(11, 8)

                    let sensor_values = data.sensors;

                    clearTable(sensors_table, 1); // второй параметр указывает, с какой строки удалять (0 - первая)
                    sensor_values.forEach((sensor) => {

                        var td;
                        var tr = document.createElement('tr');
                        
                        td = document.createElement('td');
                        td.innerHTML=sensor.name;
                        tr.appendChild(td);

                        td = document.createElement('td');
                        td.innerHTML=sensor.temperature;
                        tr.appendChild(td);

                        td = document.createElement('td');
                        td.innerHTML=sensor.himidity;
                        tr.appendChild(td);

                        td = document.createElement('td');
                        td.innerHTML=sensor.heat_index;
                        tr.appendChild(td);

                        sensors_table.append(tr);
                    });

                    clearTable(info_table, 1); // второй параметр указывает, с какой строки удалять (0 - первая)
                    info_table.append("<tr><td>"+battery_voltage+"</td><td>"+rssi+"</td><td>"+normal_uptime+"</td><td>"+wifi_name+"</td></tr>")

                    setTimeout(update_sensor_values, 2000);
                })
                .catch(e => {
                    console.log('Error: ', e);
                    setTimeout(update_sensor_values, 2000);
                });
        }

function clearTable(table, offset = 0)
{
    let rowCount = table.rows.length;
    for (var i = offset; i < rowCount; i++)
    {
        table.deleteRow(offset);
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.