Square table generation

Question

Good evening! I have the following page:

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

There is a table on it, by clicking on the cells of which you can change the picture to a cross or a toe.
How to make the same table, with the same functionality, but with the size specified by the user?
Using only js and html.

Exactly the same, with the same number of cells? Or does the user indicate the number of cells? - Yuri

Accepted Answer · 2016-12-24T16:13:07

 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>

But I ran into the following problem: I want to add my OnClick event handler to the 'for cell (var j = 0; j <size; j ++) {var cell1 = row.insertCell (j);
} 'After that, the whole table breaks and shows nothing, what's the problem?

Square table generation

1 answer 1

More articles: