JSFiddle - React, Tailwind, and code Playground

by Ivan Pshenitsyn

HTML

<table id="myTable">
	<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>

CSS

td{
	width: 30px;
	height: 30px;
	border: 1px solid black;
	cursor: pointer;
	text-align: center;
	font-family: cursive;
}

JavaScript

var pos = [
		[[0,0],[0,1],[0,2]], //1 строка
		[[1,0],[1,1],[1,2]], //2 строка
		[[2,0],[2,1],[2,2]], //3 строка
		[[0,0],[1,0],[2,0]], //1 столбец
		[[0,1],[1,1],[2,1]], //2 столбец
		[[0,2],[1,2],[2,2]], //3 столбец
		[[0,0],[1,1],[2,2]], //лево-верх - право-низ
		[[2,0],[1,1],[0,2]], //лево-низ - право-верх
	];
	function proverka() {
		var table = document.getElementById("myTable");

		var flag;
		for(var i = 0; i < pos.length; i++){
			var win = true;
			for(var k = 0; k < pos[i].length; k++){
				if(table.rows[pos[i][k][0]].cells[pos[i][k][1]].innerHTML !== 'X') 
					win = false;
			}
			if(win){
				flag = true;
				break;
			}
		}  

		if (flag) {
		  alert("победа");
		}
	}

	var tds = document.getElementsByTagName('td');
	for(var i = 0; i < tds.length; i++){
		tds[i].addEventListener('click', function(){
			if(this.innerHTML !== 'X'){
				this.innerHTML = 'X';
			} else {
				this.innerHTML = '';
			}
			proverka();
		})
	}