Как вывести матрицу в 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]

Получение случайного числа:

const random = (min, max) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

Создание матрицы:

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

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

    for (let j = 0; j < cols; j++) {
      matrix[i][j] = random(min, max);
    }
  }

  return matrix;
}

// или

const createMatrix = (rows, cols, min, max) =>
  Array.from({ length: rows }, () =>
    Array.from({ length: cols }, () =>
      random(min, max)
    )
  );

Вывод:

function outputMatrix(matrix, el) {
  const table = document.createElement('table');

  matrix.forEach(function(n) {
    const tr = this.insertRow();
    n.forEach(m => tr.insertCell().textContent = m);
  }, table.createTBody());

  el.appendChild(table);
}

// или

function outputMatrix(matrix, el) {
  el.insertAdjacentHTML('beforeend', `
    <table>
      <tbody>${matrix.map(n => `
        <tr>${n.map(m => `
          <td>${m}</td>`).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
  `);
}

Как всем этим пользоваться:

outputMatrix(createMatrix(5, 5, 10, 30), document.body);

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>?