Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2018, 21:50
Кандидат Javascript-наук
Отправить личное сообщение для Retro_1477 Посмотреть профиль Найти все сообщения от Retro_1477
 
Регистрация: 14.04.2018
Сообщений: 113

проверка и добавление элемента в тег
Дана таблица, при нажатие на ячейку которой добавляется крестик, потом нолик и так по очереди. Нужно сделать проверку на символ в ячейке и если там пусто добавить крестик или нолик. Заранее спасибо

<!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]
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2018, 23:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

canvas крестики нолики rough
Retro_1477,
делайте полноценные макеты, а не конструктор!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
td {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}
.field{
    margin-left: auto;
    margin-right: auto;
}

canvas{
    display: block;
}
.can{
    background-color: #FFFACD;
}

</style>
</head>
<body>

</body>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/2.2.5/rough.min.js"></script>
<script>
$(function() {
    var strok = 3,
        stolbov = 3,
        table = $("<table class='field'></table>").appendTo("body"),
        n = 1;
    for (var i = 0; i < strok; i++) {
        var tr = $("<tr>").appendTo(table);
        for (var j = 0; j < stolbov; j++) $("<td>", {
            click: function() {
                if ($(this).is(".can")) return;
                $(this).addClass("can");
                var canvas = $("<canvas width='100' height='100'>").appendTo(this)[0];
                canvas = rough.canvas(canvas);
                if (++n % 2) canvas.circle(50, 50, 90);
                else {
                    canvas.line(0, 0, 100, 100);
                    canvas.line(100, 0, 0, 100)
                }
            }
        }).appendTo(tr)
    }
});
</script>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2018, 07:46
Кандидат Javascript-наук
Отправить личное сообщение для Retro_1477 Посмотреть профиль Найти все сообщения от Retro_1477
 
Регистрация: 14.04.2018
Сообщений: 113

Хорошо)
Спасибо за помощь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка элемента на существование в цикле rodiony4 Элементы интерфейса 14 02.06.2017 15:26
Проверка на существование элемента в реальном времени js dkmrus Общие вопросы Javascript 7 03.05.2016 22:12
Блокирование интерфейса. Добавление нового элемента vychmat Элементы интерфейса 5 20.03.2014 15:04
Ext.tree, динам. добавление элемента Margarita ExtJS 0 24.12.2012 15:00
как узнать тег элемента с помощью jQuery? Shitbox2 jQuery 2 03.11.2012 08:04