grid interactive demo for nat

demo.html

<style>
td {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

td.highlighted {
  background: #ffcccc;
}
</style>

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

<script>
window.onload = () => {
  const rows = Array.from(document.querySelectorAll('tr'));
  const cells = rows.map(
    r => Array.from(r.querySelectorAll('td'))
  )

  let active = {
    row: 0,
    col: 0
  };

  document.addEventListener("keydown", event => {
    if (event.key === 'ArrowDown') {
      active.row = active.row + 1;
      updateHighlights();
    }
  });

  function updateHighlights() {
    cells.forEach(row => {
      row.forEach(cell => {
        cell.classList.remove('highlighted');
      });
    });

    cells[active.row][active.col].classList.add('highlighted');
  }

  updateHighlights();

}
</script>