Create a html table where inputs are inside

Question

I have the following html table:

<table>
    <tr>
      <td> <input> </td>
      <td> <input> </td>
      <td> <input> </td>
    </tr>
    <tr>
      <td> <input> </td>
      <td> <input> </td>
      <td> <input> </td>
    </tr>
    <tr>
      <td> <input> </td>
      <td> <input> </td>
      <td> <input> </td>
    </tr>
  </table>

Instead, I would like to create this table only with javascript. I have read the following post. However, I would like that inside every <td> there is an <input> (as shown on the code provided). Any guidance or help would be appreciated.

Thanks!

Answer 1

I found the answer:

const table = document.querySelector('table');

function generateTable() {
  for (let i = 0; i < 5; i++) {
    const row = table.insertRow();
    for (let a = 0; a < 5; a++) {
      const cell = row.insertCell();
      const inputCell = document.createElement("INPUT");
      cell.appendChild(inputCell);
    }
  }
}

generateTable()

<table> </table>