БЛОГ НА HUSL


Перезаписать значение в ячейке таблицы HTML через Javascript

Автор вопроса: Keonik

Есть JSON файл, в котором хранятся данные о состоянии устройств. Есть таблица, которая автоматически создается в соответствии с количеством устройств в этом json файле. После создания таблицы мне нужно занести данные из JSON'а в эту таблицу по ячейкам.

JSON файл (devices.json):

{
    "index": {
        "0": {
            "hostname": "test.domain.ru",
            "IPadd": "google.com",
            "Description": "\u0442\u0435\u0441\u0442",
            "past state": "Online",
            "currently state": "Online",
            "currently time": "16:47:10  16.04.2021"
        },
        "1": {
            "hostname": "test.domain2.ru",
            "IPadd": "127.0.0.1",
            "Description": "\u0442\u0435\u0441\u04422",
            "past state": "Online",
            "currently state": "Online",
            "currently time": "16:47:10  16.04.2021"
        }
    }
}

HTML файл (index.html):

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<style>
    table td
    {
        padding: 20px;
        border: 1px solid black;
    }
    table th
    {
        padding: 20px;
        border: 1px solid rgb(0, 0, 0);
    }
</style>
<body>

    <div class="table" , id="devicesTable"></div>
    <script>
        var tableEl = document.querySelector('#devicesTable')
        var NumbersOfDevices = 0
        var colsIN = 6
        $.getJSON('devices.json', function (devicesData) 
        {
            NumbersOfDevices = Object.keys(devicesData.index).length; //определение, сколько рядов создавать
            createTable(tableEl, colsIN, NumbersOfDevices) //создание таблицы

            $('table tr').each(function(row){
                $(this).find('td').each(function(cell){
                    $(this).text()     //Если я в поле text введу любую строку, то вся таблица заполнится этой строкой
                });
            });
        });

        function createTable(Name, cols, rows)
        {
            //создание таблицы
            var table = document.createElement('table');
            //создание заголовков колонок таблицы
            let thValues = ["№", "Имя Хоста", "IP-адрес", "Состояние т.", "Состояние п.", "Время опроса", "Описание"]
            for (i = 0; i< cols; i++) 
            {
                var th = document.createElement('th');
                var vth = document.createTextNode(thValues[i]);
                th.appendChild(vth)
                table.appendChild(th)
            }
            //создание ячеек таблицы
            for (var i = 0; i <= rows; i++)
            {
                var tr = document.createElement('tr');

                for (var j = 0; j < cols; j++)
                {
                    var td = document.createElement('td');
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
            Name.appendChild(table);
        }
    </script>

</body>

</html>

Окончательный вопрос: Как мне нужно написать здесь:

$(this).find('td').each(function(cell){
                    $(this).text()     //Если я в поле text введу любую строку, то вся таблица заполнится этой строкой
                });

чтобы перезаписать данные в таблице на те, что в json файле? Напишите, пожалуйста, с объяснением, ибо я пень.


Источник

Ответы (3 шт):

Автор решения: teran

Заполнение таблицы по объекту можно примерно так сделать. При этом, вряд ли есть смысл строить эту таблицу (заголовки) средствами js, когда она у вас статична.

сделали каркас в верстке, обошли объект с данными и добавили строки.

const data = {"index":{"0":{"hostname":"test.domain.ru","IPadd":"google.com","Description":"test","past state":"Online","currently state":"Online","currently time":"16:47:10  16.04.2021"},"1":{"hostname":"test.domain2.ru","IPadd":"127.0.0.1","Description":"test","past state":"Online","currently state":"Online","currently time":"16:47:10  16.04.2021"}}};

function updateData(data){
   $.each(data.index, function(idx, d){      
       let row = `<tr><td></td>
                <td>${d.hostname}</td>
                <td>${d.IPadd}</td>
                <td>${d.Description}</td>
                <td>-</td><td>-</td><td>-</td>
              </tr>`;
      $(row).appendTo("#dd");
   });
}

updateData(data); // $.getJSON(...)
#dd { counter-reset: rn; }
#dd tr { counter-increment: rn; }
#dd td:first-child::before { content: counter(rn); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="devices">
  <thead>
    <tr>
      <th>№</th>
      <th>Имя Хоста</th>
      <th>IP-адрес</th>
      <th>Состояние т.</th>
      <th>Состояние п.</th>
      <th>Время опроса</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody id="dd"></tbody>
</table>

→ Ссылка
Автор решения: Aziz Umarov

Если слегка поработать напильником то можно получить такое из вашего кода

function resultJson(devicesData) 
{
    
    let thValues = ["№", "Имя Хоста", "IP-адрес", "Состояние т.", "Состояние п.", "Время опроса", "Описание"];
    
    createTable(thValues, devicesData); //создание таблицы

}

function createTable(thValues, devicesData)
{
    //создание таблицы
    let cols = thValues.length;
    let rows = Object.keys(devicesData).length; //определение, сколько рядов создавать    
    var Name = document.querySelector('#devicesTable');    
    var table = document.createElement('table');
    
    //создание заголовков колонок таблицы
    
    for (let i = 0; i < cols; i++) 
    {
        var th = document.createElement('th');
        var vth = document.createTextNode(thValues[i]);
        th.appendChild(vth);
        table.appendChild(th);
    }
    
    //создание ячеек таблицы
    for (var i = 0; i < rows; i++)
    {
        var tr = document.createElement('tr');
        
        var td = document.createElement('td');
        td.innerHTML = i;
        tr.appendChild(td);
        
        td = document.createElement('td');
        td.innerHTML = devicesData[i]['hostname'];
        tr.appendChild(td);
        
        td = document.createElement('td');
        td.innerHTML = devicesData[i]['IPadd'];
        tr.appendChild(td);
        
        td = document.createElement('td');
        td.innerHTML = devicesData[i]['Description'];
        tr.appendChild(td);
        
        td = document.createElement('td');
        td.innerHTML = devicesData[i]['past state'];
        tr.appendChild(td);
        
        td = document.createElement('td');
        td.innerHTML = devicesData[i]['currently state'];
        tr.appendChild(td);
        
        td = document.createElement('td');
        td.innerHTML = devicesData[i]['currently time'];
        tr.appendChild(td);
            
        
        table.appendChild(tr);
    }
    Name.appendChild(table);
}



// имитируем получение и работаем

let devicesData = [
        {
            "hostname": "test.domain.ru",
            "IPadd": "google.com",
            "Description": "\u0442\u0435\u0441\u0442",
            "past state": "Online",
            "currently state": "Online",
            "currently time": "16:47:10  16.04.2021"
        },
        {
            "hostname": "test.domain2.ru",
            "IPadd": "127.0.0.1",
            "Description": "\u0442\u0435\u0441\u04422",
            "past state": "Online",
            "currently state": "Online",
            "currently time": "16:47:10  16.04.2021"
        }
    ];

//console.log(devicesData);
resultJson(devicesData);
table td
{
    padding: 20px;
    border: 1px solid black;
}
table th
{
    padding: 20px;
    border: 1px solid rgb(0, 0, 0);
}
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<div class="table" id="devicesTable"></div>

→ Ссылка
Автор решения: Keonik

За основу взято решение помеченное как ответ. При использовании структуры JSON'а как в ответе, ничего менять не нужно, но если использовать ту структуру, как в вопросе, необходимо сделать следующее:

Заменить let rows = Object.keys(devicesData).length; на let rows = Object.keys(devicesData.index).length; (добавлен "index" после devicesData).

Заменить td.innerHTML = devicesData[i]['hostname']; на td.innerHTML = devicesData.index[i]['hostname'];

Также был баг, что данные почему-то не обновлялись, при изменении/добавлении/удалении записей в JSON, он выдавал данные, которые получил впервые. Я не знаю с чем это было связано (нет, я не редактировал другой файл). Но добавив это, баг исчез:

for (i=0; i <1; i++)
{
    $.getJSON('devices.json', function (devicesData) 
    {
        resultJson(devicesData);
    });
}

Код выше заменяет код из ответа помеченного решением, а именно:

let devicesData = [
        {
            "hostname": "test.domain.ru",
            "IPadd": "google.com",
            "Description": "\u0442\u0435\u0441\u0442",
            "past state": "Online",
            "currently state": "Online",
            "currently time": "16:47:10  16.04.2021"
        },
        {
            "hostname": "test.domain2.ru",
            "IPadd": "127.0.0.1",
            "Description": "\u0442\u0435\u0441\u04422",
            "past state": "Online",
            "currently state": "Online",
            "currently time": "16:47:10  16.04.2021"
        }
    ];

//console.log(devicesData);
resultJson(devicesData);
→ Ссылка

licensed under cc by-sa 3.0 with attribution.