Как вывести матрицу в DOM?

Question

[WarriorKodeK]

Мне надо создать матрицу 5x5 и вывести ее.

Я знаю как создать ее:

function matrixArray(rows,columns){
  var arr = [];
  for(var i=0; i<rows; i++){
    arr[i] = [];
    for(var j=0; j<columns; j++){
      arr[i][j] = Math.floor(Math.random() * 20) + 10;
    }
  }
  return arr;
}
var myMatrix = matrixArray(5,5);

Но как вывести ее в ДОМ по типу - https://prnt.sc/id94of , что то в ум не приходит толком. Подскажите как сделать?

Cпасибо!

Answer 1

[0xD34F]

function createMatrix(rows, cols, min, max) {
  const matrix = [];

  for (let i = 0; i < rows; i++) {
    matrix[i] = [];

    for (let j = 0; j < cols; j++) {
      matrix[i][j] = Math.floor(Math.random() * (max - min + 1)) + min;
    }
  }

  return matrix;
}

document.querySelector('body').insertAdjacentHTML('beforeend', `
  <table>${createMatrix(5, 5, 10, 30).map(n => `
    <tr>${n.map(m => `
      <td>${m}</td>`).join('')}
    </tr>`).join('')}
  </table>
`);

Comments

[WarriorKodeK]

Спасибо я в принципе так и делал.

const generateMatrix = (row, column) => {
  const matrixArr = [];
  for (let i = 0; i < row; i++) {
    matrixArr[i] = [];
    for (let j = 0; j < column; j++) {
      matrixArr[i][j] = generateNumbers(25, 100);
    }
  }
  return matrixArr;
};

const createCard = matrix => {
  const card = document.createElement('div');
  card.className = 'card';
  matrix.forEach(element => {
    element.forEach(el => {
      const cell = document.createElement('div');
      cell.className = 'cell';
      cell.textContent = el;
      card.appendChild(cell);
    });
  });
  cardContainer.appendChild(card);
};

Можете пожалуйста объяснить почему вы использовали mapвместо forEach?

[string15]

WarriorKodeK, потому что нужно вернуть, а не просто перебрать)

[WarriorKodeK]

string15, Не вижу там return'a, ну ладно)
Хотя прочитав про скорость работы, то map побыстрее будет

[0xD34F]

Краткая форма записи стрелочных функций не предполагает использование return, возврат значения осуществляется неявно.

[WarriorKodeK]

0xD34F, Точно забыл совсем.

Answer 2

[string15]

table

Answer 3

[Stalker_RED]

<table>?