Вывести данные в html в виде таблицы (используя js)

Question

Мне нужно вывести матрицу 3x3 в виде таблицы html. То, как должна выглядеть таблички прикреплю в картинки. Код, который написала я выводит результат только строкой (например: 1,2,3,4,..) Что я делаю не так? Спасибо

<div class = "table_out">
    <input type="button" id="multiplication" value="Multiplication">
    <p> Result </p>
  <table id="C"> 
        <tbody>
        <tr>
        <td> <input type="text" id="c00"> </td>
        <td> <input type="text" id="c01"> </td>
        <td> <input type="text" id="c02"> </td>
        </tr>
        <tr>
        <td> <input type="text" id="c10"> </td>
        <td> <input type="text" id="c11"> </td>
        <td> <input type="text" id="c12"> </td>
        </tr>
        <tr>
        <td> <input type="text" id="c20"> </td>
        <td> <input type="text" id="c21"> </td>
        <td> <input type="text" id="c22"> </td>
        </tr>
    </tbody>
        </table>
  </div>

и фрагмент js:

MultiplyMatrix(array1, array2);
   let arr = MultiplyMatrix(array1, array2);
    document.getElementById("c00").value = arr[0][0];
    document.getElementById("c01").value = arr[0][1];
    document.getElementById("c02").value = arr[0][2];
    
    document.getElementById("c10").value = arr[1][0];
    document.getElementById("c11").value = arr[1][1];
    document.getElementById("c12").value = arr[1][2];

    document.getElementById("c20").value = arr[2][0];
    document.getElementById("c21").value = arr[2][1];
    document.getElementById("c22").value = arr[2][2];

Answer 1

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]; // ваш двумерный массив

const tableDom = document.querySelector('table#C');

Array.from(tableDom.rows).forEach((row, i) => {
  Array.from(row.cells).forEach((cell, j) => {
    const input = cell.querySelector('input');
    input.value = arr[i][j];
  });
});

<div class="table_out">
  <input type="button" id="multiplication" value="Multiplication">
  <p> Result </p>
  <table id="C">
    <tbody>
      <tr>
        <td> <input type="text" id="c00"> </td>
        <td> <input type="text" id="c01"> </td>
        <td> <input type="text" id="c02"> </td>
      </tr>
      <tr>
        <td> <input type="text" id="c10"> </td>
        <td> <input type="text" id="c11"> </td>
        <td> <input type="text" id="c12"> </td>
      </tr>
      <tr>
        <td> <input type="text" id="c20"> </td>
        <td> <input type="text" id="c21"> </td>
        <td> <input type="text" id="c22"> </td>
      </tr>
    </tbody>
  </table>
</div>

БЛОГ НА HUSL

Вывести данные в html в виде таблицы (используя js)

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