主页 / 问题 / 607418
Accepted
Slava Podolskiy
Asked:2020-12-24 23:43:07 +0000 UTC2020-12-24 23:43:07 +0000 UTC

方桌一代

  • 772

晚上好！我有以下页面：

<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。

javascript

1 个回答

  1. Best Answer

    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>

    • 4

相关问题