как правильно заполнить таблицу данными из массива?

Question

animals = [
    ['?','mouse','Jerry'],
    ['?','hamster','Biscuit'],
    ['?','rabbit','Bugs'],
    ['?','fox','Mrs. Fox'],
    ['?','bear','Paddington']
];
animals = animals.flat();
console.log(animals)
food = [
    ['?','apple',10],
    ['?','pear',12],
    ['?','tangerine',15],
    ['?','lemon',5],
    ['?','banana',7]
];

universes = [
    ['?', 'DC', ['Superman', 'Batman', 'Wonder Woman']],
    ['❤️', 'Marvel', ['Iron Man', 'the Hulk', 'Black Widow']]
];


function getInfo (name){
        let trs = [];
    for (let tr = 1; tr <= 5; tr++){
        let tds = [];
            for ( let td = 1; td <= 3; td++){
             tds.push(`<td>${name[td-1]}</td>`)
             }
            trs.push(`<tr>${tds.join(` `)}</tr>`)
    
            }    
    
            document.write(`<table>

            ${trs.join(` `)}</table>`)
}

getInfo(animals);
// getInfo(food, undefined);
// getInfo(universes, undefined);

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

Answer 1

animals = [
  ['?', 'mouse', 'Jerry'],
  ['?', 'hamster', 'Biscuit'],
  ['?', 'rabbit', 'Bugs'],
  ['?', 'fox', 'Mrs. Fox'],
  ['?', 'bear', 'Paddington']
];

food = [
  ['?', 'apple', 10],
  ['?', 'pear', 12],
  ['?', 'tangerine', 15],
  ['?', 'lemon', 5],
  ['?', 'banana', 7]
];

universes = [
  ['?', 'DC', ['Superman', 'Batman', 'Wonder Woman']],
  ['❤️', 'Marvel', ['Iron Man', 'the Hulk', 'Black Widow']]
];


function getInfo(array, title) {
  const table = document.createElement('table');
  table.innerHTML = `<caption>${title}</caption>`;
  table.innerHTML += array.map(e => 
    `<tr>${e.map(x => `<td>${x}</td>`).join``}</tr>`
  ).join``;
  return table;
}

document.body.appendChild(getInfo(food, 'Food info'));
document.body.appendChild(getInfo(animals, 'Animals info'));
document.body.appendChild(getInfo(universes, 'Universes info'));

td {
  border: solid 1px #000;
}

БЛОГ НА HUSL

как правильно заполнить таблицу данными из массива?

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