Как данные из массива вставить в созданую таблицу!

Question

Есть массив с названием месяца и дня. Нужнло создать таблицу и внести туда данные из массива. Я создаю таблицу и пытаюсь использовать Способ 1 как в коде. Он создает разметку, но не могу вставить в нее значения с массива, а если бы и мог, то сомнительно использовать такой способ, так как было бы у нас грубо говоря 100 месяцев и каждый прописывать не вариант. И я решаю использовать Способ 2, но и тут не получилось. Интересует как исправить можно Способ 2 ?

let source = [
    {
        month: "Январь",
        amount: 20
    },
    {
        month: "Февраль",
        amount: 140
    },
    {
        month: "Март",
        amount: 115
    },
    {
        month: "Апрель",
        amount: 100
    },
    {
        month: "Март",
        amount: 80
    },
    {
        month: "Июнь",
        amount: 90
    },
    {
        month: "Июль",
        amount: 100
    }
];

/* Создаем таблицy */

let table = document.createElement('table');
table.className = 'table';
document.body.append('table')

/* Способ 1 */
/* Январь */
let january = document.createElement('tr');
january.className = 'january';
table.prepend(january);

let januaryMonth = document.createElement('td');
januaryMonth.className = 'januaryMonth';
january.prepend(januaryMonth);

let januaryAmount = document.createElement('td');
januaryAmount.className = 'januaryAmount';
january.append(januaryAmount);

januaryMonth.insertAdjacentHTML("afterBegin", (source[i].month))

/* Способ 2 */
const truetable = document.getElementsByClassName('table');

for (let i = 0; i < source.length; i++) {
    let row = document.createElement('tr');
    row.innerHTML = `<td>${i+1}</td><td>${source[i].month}</td><td>${source[i].amount}`;
    truetable.appendChild(row);
}

<html>
  <head>
  </head>
  <body>

  </body>
</html>

Answer 1

Исправил Ваш вариант на рабочий

let source = [    {        month: "Январь",        amount: 20    },    {        month: "Февраль",        amount: 140    },    {        month: "Март",        amount: 115    },    {        month: "Апрель",        amount: 100    },    {        month: "Март",        amount: 80    },    {        month: "Июнь",        amount: 90    },    {        month: "Июль",        amount: 100    }];

let table = document.createElement('table');
table.className = 'table';
document.body.append(table);

const truetable = document.getElementsByClassName('table');
let row;

for (let i = 0; i < source.length; i++) {
    row = document.createElement('tr');
    row.innerHTML = `<td>${i+1}</td><td>${source[i].month}</td><td>${source[i].amount}`;
    table.appendChild(row);
}

<html>
  <head>
  </head>
  <body>

  </body>
</html>

Ошибка была в этой строке document.body.append('table') Все что идет в кавычках - это строка, вы вставляли в body просто строку table. А нужно было переменную. И также вот здесь truetable.appendChild(row), функция, результат которой вы присвоили truetable const truetable = document.getElementsByClassName('table');, а именно getElementsByClassName возвращает не один элемент, а массив таких элементов. Потому надо либо использовать truetable[0].appendChild(row), либо обратиться к перменной table То есть по сути, строка const truetable = document.getElementsByClassName('table'); не нужна, т.к. у вас уже есть переменная table, в которйо хранится нужный элемент dom

БЛОГ НА HUSL

Как данные из массива вставить в созданую таблицу!

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