I am struggling with printing a 16x16 grid of divs using jQuery. It works perfectly on JSFiddle, but only one row is printed when testing in the browser. I realized that changing the jQuery version from edge to 2.1.3 on JSFiddle results in the same issue in the browser. What could be causing this discrepancy?
Despite finding similar questions, none of the suggested solutions have worked for me. I have tried using window.onload, $(document).ready(), replacing $ with jQuery, and adjusting the script linking location without success. If anyone can point out where my code is failing or direct me to a relevant solution, I would greatly appreciate it.
JQuery
$square = $('<td><div class="square"></div></td>');
$(document).ready(function () {
for (var i = 1; i <= 16; i++) {
for (var j = 1; j <= 16; j++) {
$("#contain").append("<td></td>");
}
$("#contain").append("<tr></tr>");
}
$square.appendTo("td");
});
HTML
<!doctype html>
<html>
<head>
<title>Game</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="gamecss.css"/>
<script type="text/javascript" src="gamejs.js"></script>
</head>
<body>
<table id="contain"></table>
</body>
</html>
CSS
#contain
{
width:100%;
}
.square
{
height: 20px;
width: 20px;
background-color: black;
border: solid 1px black;
display: block;
}