Генерация квадратной таблицы

372

25 декабря 2016, 19:06

Добрый вечер! У меня есть следующая страница:

<html> 
<head>	 
<title>крестики нолики</title> 
		<script type="text/javascript" language="javascript"> 
			function ShowImage(id)  
			{		 
				if(document.getElementById("flag").title == "false") 
				{ 
					document.getElementById(id).src="1.png"; 
					document.getElementById("flag").title = "true"; 
				}else 
				{ 
					document.getElementById(id).src="2.png"; 
					document.getElementById("flag").title = "false"; 
				} 
			}			 
			function CreateTable(size) 
			{ 
				//Создание таблицы 
			} 
		</script> 
	<style type='text/css'> 
	td{ 
		border: 2px solid #000000; 
		padding: 2px; 
		} 
		table{ 
		margin: 0 auto; 
		width: 200px; 
		max-width: 900px; 
		min-width: 50px; 
		height: 200px; 
		max-height: 1200px; 
		min-height: 100px; 
	</style> 
	</head> 
	<body> 
		<FORM 
			<b>Введите размер таблицы.</b> 
			<BR> 
			<INPUT TYPE=Text NAME="Info"> 
			<INPUT TYPE=BUTTON 
			ONCLICK="CreateTable(4)" 
			VALUE="Создать"> 
		</FORM>	 
	<div id="flag" title = "false"></div> 
	<table> 
		<tr> 
			<td/><img id="i1" onClick="ShowImage(this.id)" src="0.png"></td> 
			<td/><img id="i2" onClick="ShowImage(this.id)" src="0.png"></td> 
			<td/><img id="i3" onClick="ShowImage(this.id)" src="0.png"></td> 
		</tr> 
		<tr> 
			<td/><img id="i4" onClick="ShowImage(this.id)" src="0.png"></td> 
			<td/><img id="i5" onClick="ShowImage(this.id)" src="0.png"></td> 
			<td/><img id="i6" onClick="ShowImage(this.id)" src="0.png"></td> 
		</tr> 
		<tr> 
			<td/><img id="i7" onClick="ShowImage(this.id)" src="0.png"></td> 
			<td/><img id="i8" onClick="ShowImage(this.id)" src="0.png"></td> 
			<td/><img id="i9" onClick="ShowImage(this.id)" src="0.png"></td> 
		</tr> 
	</table>  
</body> 
</html>

На ней таблица, щелкая по ячейкам которых можно изменить картинку на крестик или нолик.
Как сделать такую же таблицу, с таким же функционалом, но с размером, указанным пользователем?
С помощью только js и html.

Answer 1

function ShowImage(id) { 
  
  if (document.getElementById("flag").title == "false") { 
    document.getElementById(id).setAttribute("style", "background: url(http://anonymousglobal.org/commanderx/blog/wp-content/uploads/2014/12/redX2.png);background-size: 50px 50px;"); 
    document.getElementById("flag").title = "true"; 
  } else { 
    document.getElementById(id).setAttribute("style", "background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Classic_alphabet_numbers_0_at_coloring-pages-for-kids-boys-dotcom.svg/220px-Classic_alphabet_numbers_0_at_coloring-pages-for-kids-boys-dotcom.svg.png);background-size: 50px 50px;"); 
    document.getElementById("flag").title = "false"; 
  } 
} 
 
function CreateTable() { 
  document.getElementById("tab").innerHTML = ''; 
  var size = document.getElementById("size").value; 
  if (size > 0 && size < 11) { 
    var table = document.getElementById("tab"); 
    for (var i = 0; i < size; i++) { 
      var row = table.insertRow(i); 
      for (var j = 0; j < size; j++) { 
        var cell1 = row.insertCell(j); 
        cell1.setAttribute("id", i+ "" + j) 
        cell1.addEventListener("click", function(){                      ShowImage(this.getAttribute('id')) 
        }) 
         
      } 
    } 
  } else { 
    alert("input number between 1 and 10"); 
  } 
}

td { 
  border: 2px solid #000000; 
  padding: 2px; 
  background-size: 25px 25px; 
} 
table { 
  margin: 0 auto; 
  width: 200px; 
  max-width: 900px; 
  min-width: 50px; 
  height: 200px; 
  max-height: 1200px; 
  min-height: 100px; 
}

<html> 
 
<head> 
  <title>крестики нолики</title> 
 
</head> 
 
<body> 
  <b>Введите размер таблицы.</b> 
  <br> 
  <INPUT TYPE=Text NAME="Info" id='size' /> 
  <INPUT TYPE=BUTTON ONCLICK="CreateTable();" VALUE="Создать" /> 
  <div id="flag" title = "false"></div> 
  <table id="tab"> 
 
  </table>  
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Получить последующие строки после Range Word C#

417

async/await в парсере

Нужно спарсить информацию о пользователях сайта

365

Подключение геймпада к UWP проекту

Есть UWP проект, к нему нужно подключить поддержку управления геймпадом(контроллер XBOX), как это можно реализовать? Есть ли какие-нибудь библиотеки...

366

Entity framework ошибка Invalid column name при доступе к таблице

Здравствуйте

384