JSFiddle - React, Tailwind, and code Playground

by Ivan Pshenitsyn

HTML

<input type="number" id="count">
<table id="myTable">

</table>

CSS

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

JavaScript

var table = document.getElementById("myTable");
  
	function proverka() {

		var flag;
    var count = table.getElementsByTagName('tr').length;
		for(var i = 0; i < count; i++){
			var winRow = true,
			    winColumn = true,
			    winLeftTop = true,
			    winLeftBottom = true;
      
			for(var k = 0; k < count; k++){
				if(table.rows[i].cells[k].innerHTML !== 'X') winRow = false;
				if(table.rows[k].cells[i].innerHTML !== 'X') winColumn = false;
				if(table.rows[k].cells[k].innerHTML !== 'X') winLeftTop = false;
				if(table.rows[count-1-k].cells[k].innerHTML !== 'X') winLeftBottom = false;
			}
      
			if(winRow || winColumn || winLeftTop || winLeftBottom){
				flag = true;
				break;
			}
		}  

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

  //вешаем слушатели события click на поля таблицы после ее перерисовки
	var setTdListeners = function(){
    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();
      })
    };
  };
  
  //перерисовка таблицы после потери фокуса полем input
  document.getElementById('count').addEventListener('blur', function(){
  	var count = this.value;
    table.innerHTML = '';
    for(var i = 0; i < count; i++){
      var tr = document.createElement('tr');
     	for(var k = 0; k < count; k++){
      	var td = document.createElement('td');
        tr.appendChild(td);        
    	}   
    	table.appendChild(tr);
    }
  	setTdListeners();
  });