Блог

Главная - Вопросы по программированию - Создание таблицы с использованием чистого JavaScript (DOM) и заданного массива объектов?

Создание таблицы с использованием чистого JavaScript (DOM) и заданного массива объектов?

#javascript

#javascript

Вопрос:

Таблица

Я должен создать эту таблицу с помощью JavaScript.

Что мне было дано:

 var users = [
{
    first_name: 'Kaitlin',
    last_name: 'Burns',
    age: 23,
    email: 'kburns99753@usermail.com'
},
{
    first_name: 'Joshua',
    last_name: 'Feir',
    age: 31,
    email: 'josh319726@usermail.com'
},
{
    first_name: 'Stephen',
    last_name: 'Shaw',
    age: 28,
    email: 'steve.shaw47628@usermail.com'
},
{
    first_name: 'Timothy',
    last_name: 'McAlpine',
    age: 37,
    email: 'Timbo72469@usermail.com'
},
{
    first_name: 'Sarah',
    last_name: 'Connor',
    age: 19,
    email: 'SarahC6320@usermail.com'
}
];

Что я пробовал:

 var tabl = document.getElementById('tbl');
var newTbl = document.createElement('table');
var tHead = document.createElement('thead');
var tBody = document.createElement('tbody');

tabl.appendChild(newTbl);
newTbl.setAttribute('border', '1px solid');
newTbl.appendChild(tHead);

var tRow = document.createElement('tr');
var tCol = document.createElement('td');

tHead.appendChild(tRow);

console.log(newTbl);

for(var i = 0; i < users.length; i  )
{
 var tCol = document.createElement('td');
 tCol.innerHTML  = users[i].first_name;
 tCol.innerHTML  = users[i].last_name;
 tCol.innerHTML  = users[i].age;
 tCol.innerHTML  = users[i].email;
 tRow.appendChild(tCol);
}

Моя цель — создать таблицу с использованием чистого javascript. Я перепробовал много способов, хотя этот способ дает мне таблицу, которая выводит все значения, но помещает их все в одну строку.

Мне нужно, чтобы эта таблица выглядела как приведенная выше, так как это было бы с благодарностью. Спасибо!

Комментарии:

1. Вы создаете только одну TD (ячейку данных таблицы) для каждого пользователя, и вы помещаете все данные для пользователя в одну ячейку. Если вам нужны разные фрагменты данных в разных ячейках, вам нужно создать отдельный TD для каждой из них и заполнить каждый TD только одним фрагментом данных. (Затем, конечно, добавьте все ячейки в одну строку.)

Ответ №1:

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

Вот рабочая скрипка

 var tabl = document.getElementById('tbl');
var tHead = document.createElement('thead');
var tBody = document.createElement('tbody');

tabl.setAttribute('border', '1px solid');
tabl.appendChild(tHead);
tabl.appendChild(tBody);

var fieldTitles = ["First name", "Last name", "Age", "Email"]

var tHeadRow = document.createElement('tr');
tHead.appendChild(tHeadRow);

fieldTitles.forEach(function (field) {
     var tCol = document.createElement('td');
     tCol.innerHTML = field;
     tHeadRow.appendChild(tCol);
   })

var fields = ['first_name', 'last_name', 'age', 'email'];

for(var i = 0; i < users.length; i  ) {
  var tRow = document.createElement('tr');
  tabl.appendChild(tRow);

  fields.forEach(function (field) {
    var tCol = document.createElement('td');
    tCol.innerHTML = users[i][field];
    tRow.appendChild(tCol);
  })
}

Ответ №2:

Это позволит динамически создавать head на основе данных и т.д.

 const buildHead = (data) => {
  let tHead = document.createElement('thead');
  let tr = document.createElement('tr');
  let sample = data[0];
  for(let prop in sample) {
    let th = document.createElement('th');
    th.innerText = prop.replace('_', ' ');
    tr.appendChild(th);
  }  
  tHead.appendChild(tr);
  return tHead;
};

const buildBody = (data) => { 
  let tBody = document.createElement('tbody');
  data.forEach(d => {
    let tr = document.createElement('tr');
    Object.values(d).forEach(val => {
      let td = document.createElement('td');
      td.innerText = val;
      tr.appendChild(td);
    });
    tBody.appendChild(tr);
  });
  return tBody;
};

const buildTable = (data) => {
  let table = document.querySelector('table');
  table.appendChild(buildHead(data));
  table.appendChild(buildBody(data));  
};

var users = [{
    first_name: 'Kaitlin',
    last_name: 'Burns',
    age: 23,
    email: 'kburns99753@usermail.com'
  },
  {
    first_name: 'Joshua',
    last_name: 'Feir',
    age: 31,
    email: 'josh319726@usermail.com'
  },
  {
    first_name: 'Stephen',
    last_name: 'Shaw',
    age: 28,
    email: 'steve.shaw47628@usermail.com'
  },
  {
    first_name: 'Timothy',
    last_name: 'McAlpine',
    age: 37,
    email: 'Timbo72469@usermail.com'
  },
  {
    first_name: 'Sarah',
    last_name: 'Connor',
    age: 19,
    email: 'SarahC6320@usermail.com'
  }
];

buildTable(users);  
 th {
  text-transform: capitalize;
}  
 <table></table>