JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1 width=100% height=200>
		<tbody>
			<tr>
				<td id="x1"></td>
				<td id="x2"></td>
				<td id="x3"></td>
			</tr>
			<tr>
				<td id="x4"></td>
				<td id="x5"></td>
				<td id="x6"></td>
			</tr>
			<tr>
				<td id="x7"></td>
				<td id="x8"></td>
				<td id="x9"></td>
			</tr>
		</tbody>
	</table>

JavaScript

const colors = ['red','blue','green', 'yellow'];
	var i=1;
	while (i<=9) {
		var tdid = document.getElementById('x' + i);
		var randcolor = colors[Math.floor(Math.random()*colors.length)];
		tdid.style.background = randcolor;
		i++;
	}