Дана таблица, при нажатие на ячейку которой добавляется крестик, потом нолик и так по очереди. Нужно сделать проверку на символ в ячейке и если там пусто добавить крестик или нолик. Заранее спасибо
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="rough.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>
$(document).ready(function($) {
var strok = 3,
stolbov = 3;
$("body").append("<table class='field'></table>");
for (var i = 0; i < strok; i++) {
$("<tr>").appendTo(".field");
for (var j = 0; j < stolbov; j++) {
$("<td></td>").appendTo(".field").addClass('cell'+i+j);
}
}
$("td").click(function(){
var target = $(this);
if (target.is(".can")) {
alert('занято');
}
else{
$(this).append("<canvas id='can' width='100' height='100'>");
const rc1 = rough.canvas(document.getElementById('can'));
rc1.circle(50, 50, 90);
}
});
});
/* крестик
const rc = rough.canvas(document.getElementById('can1'));
rc.line(0, 0, 50, 50);
rc.line(50, 0, 0, 50);
*/
[CODE]td {
border: 1px solid black;
width: 100px;
height: 100px;
}
.field{
margin-left: auto;
margin-right: auto;
}
canvas{
display: block;
}[/CODE]
