0

Да, да всё плохо с js.

Есть таблица

   <table id="painting" cellspacing="2" border="1" cellpadding="5">
      <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Sum</th>
      </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

и есть массив в js файле

let section = {
  id: [1,2],
  name: ["sveta","veronika"],
  sum: [10,15],
};

Пытаюсь заполнить табличку из массива, но получается, что заполняет по горизонтале

for (let property in section) {
  let tr = '<tr>'; // создаем строку таблицы
  section[property].forEach(function(item) {
    tr += '<td>' + item + '</td>'; // добавляем столбцы в строку
  });
  tr += '</td>'; // закрываем строку таблицы
  $('#painting > tbody:last-child').append(tr); // добавляем полученную строку в дом
  console.log(tr);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

т.е. получается вот так:

ID    |Name    |Sum
_____________________ 
1     |2       |
sveta |veronika|
10    |15      |

Столбец Sum вообще пустой остаётся.

А мне нужно, что бы результат был такой:

ID    |Name    |Sum 
_____________________
1     |sveta   |10
2     |veronika|15

Наверное, цикл в цикле надо сделать, но никак не получается.

1 ответ 1

2

Если количество элементов одинаковое, то можно проще.
Отталкиваясь от количества элементов в поле id (Ведь у каждого значения будет id) делаем перебор и добавляем значения с ключами.

    let section = {
        id: [1,2],
        name: ["sveta","veronika"],
        sum: [10,15],
    };

    for (let i = 0; i < section.id.length; i++){
        let tr = '<tr>'; // создаем строку таблицы
        tr += '<td>' + section.id[i] + '</td>'; // добавляем столбцы в строку
        tr += '<td>' + section.name[i] + '</td>';
        tr += '<td>' + section.sum[i] + '</td>';
        tr += '</td>';
        $('#painting > tbody:last-child').append(tr); // добавляем полученную строку в дом
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="painting" cellspacing="2" border="1" cellpadding="5">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Sum</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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