JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div id="app"></div>

CSS

table, td {
  border: 1px solid; 
}
td {
  text-align: center;
  width: 30px;
  height: 30px;
}

JavaScript

const $table = document.createElement('table')
const $cells = []
const size = 10

for (let i = 0; i < size; i++) {
	const $row = $table.insertRow()

  for (let j = 1; j <= size; j++) {
		const $cell = $row.insertCell()
    
    $cell.innerHTML = i * size + j
		$cells.push($cell)
  }
}

const cells = $cells.length

for (let i = 0; i <= cells; i++) {
	const $a = $cells[Math.floor(Math.random() * cells)]
	const $b = $cells[Math.floor(Math.random() * cells)]
	const a = $a.innerHTML
	const b = $b.innerHTML

  $a.innerHTML = b
  $b.innerHTML = a
}

app.appendChild($table)