Develop Reference

I cant assign a value to an javascript object key

im trying to make a tetris game , and ive made some progress, but im stuck with an object key assignement problem,
what im trying to do now is detect collisions of the shapes and what i thought of is to keep track of each shape's position
,by storing the coordinates in an object called alreadyOccupiedPos
and this objects stores the shapes as keys
,for example the key name of the first shape to appear will be '1' and the key name of the second shape to appear is '2' ect...
and each shape has a value as an array of arrays, the array includes the squares that make up the shape and each square
is represented as a sub-array, and the sub-array has two elements, the current row and the current column where
the square is within the board. I started by giving the alreadyOccupiedPos object a default key for the first shape.
And i have two key variables , the first one is numberOfSquares which represents the number of squares that the shape consists of,
and it gets reseted each time a new shape gets created or moved and then the i have shapeNumber which is a default parameter in the function that i can use to to refer
to the shape number in the alreadyOccupiedPos object .Now to the problem im facing , in the second loop where the shape drawing happens , and along with drawing the shape,
im trying to insert the location of each square in the alreadyOccupiedPos object by pushing an array that includes the current row and the current column where the
square is into the array that includes the squares of the shape, and this is what i tried to do alreadyOccupiedPos[shapeNumber][numberOfSquares] = [j + step, i + randomHorizantalPos];
and the problem is it just doesnt get assigned.
this is the codepen :
https://codepen.io/marwanoss/pen/gOmxPoP?editors=0010
this is the js code:
let tableBody = document.querySelector('table').children[0];
let tableRows = Array.from(tableBody.children)
//shapes
let L_shape = [
[1, 0, 0],
[1, 0, 0],
[1, 1, 1]
];
let S_shape = [
[0, 1, 1],
[0, 1, 0],
[1, 1, 0]
];
let Z_shape = [
[1, 1, 0],
[0, 1, 0],
[0, 1, 1]
];
let J_shape = [
[0, 0, 1],
[0, 0, 1],
[1, 1, 1]
];
let square_shape = [
[1, 1, 1],
[1, 1, 1],
[1, 1, 1]
];
let I_shape = [
[0, 1, 0],
[0, 1, 0],
[0, 1, 0]
];
let T_shape = [
[1, 1, 1],
[0, 1, 0],
[0, 1, 0]
]
let shapes = [L_shape, S_shape, Z_shape, J_shape, square_shape, I_shape, T_shape]
, colors = ['red', 'black', 'green', 'yellow', 'cyan', 'rgb(44, 10, 10)']
, randomlyChosenColor = colors[Math.floor(Math.random() * colors.length)]
, randomlyChosenShape = shapes[Math.floor(Math.random() * shapes.length)]
, randomHorizantalPos = Math.floor(Math.random() * 13)
, numberOfSquares = 0
, clearLimit = tableRows.length
, alreadyOccupiedPos = { 1: [] };
function recur(step = 0, shapeNumber = 1) {
//this condition checks whether a shape has reached the bottom of the board or not, if so a new shape gets generated and the position get reseted to the top of the board.
if (step === 17) {
clearLimit = step;
randomHorizantalPos = Math.floor(Math.random() * 13);
randomlyChosenShape = shapes[Math.floor(Math.random() * shapes.length)];
randomlyChosenColor = colors[Math.floor(Math.random() * colors.length)];
alreadyOccupiedPos[shapeNumber + 1] = [];
numberOfSquares = 0;
recur(0, shapeNumber)
} else {
//this for loop clears the board
for (let i = 0; i < tableRows.slice(0, clearLimit - 1).length; i++) {
for (let j = randomHorizantalPos; j < randomHorizantalPos + 3; j++) {
tableRows[i].children[j].style.backgroundColor = 'white'
}
}
//after the board gets cleared by the previous loop this loop creates the shape by giving the squares a background color to create the illusion of the shape moving by adding a step in each recursive call
for (let i = 0; i < tableRows.length; i++) {
for (let j = 0; j < randomlyChosenShape.length; j++) {
if (randomlyChosenShape[j][i] === 1) {
tableRows[j + step].children[i + randomHorizantalPos].style.backgroundColor = randomlyChosenColor;
alreadyOccupiedPos[shapeNumber][numberOfSquares] = [j + step, i + randomHorizantalPos];
numberOfSquares++;
}
}
}
setTimeout(() => {
numberOfSquares = 0;
recur(step + 1, shapeNumber)
}, 1000);
}
}
recur()
and this is the html (thats alot of html lol, i could've created the html using a loop in js i just forgot xD) :
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script src="tetris.js"></script>
</body>
and this is the css:
body{
display: flex;
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: black;
}
html{
font-size: 10px;
}
table{
background-color: white;
height: 60rem;
width: 50rem;
margin: 5% auto;
}
table td{
background-color: white;
border: black .1px solid;
}

alreadyOccupiedPos[shapeNumber][numberOfSquares] has already been assigned. Maybe you need to change the line
recur(0, shapeNumber)
to
recur(0, shapeNumber + 1);
to assign the value to the newly created array.

How to make a popup form appear after clicking an 'empty' slot on a weekly calendar?

I am trying to create a calendar in which you can switch between month and week view. I don't think it will be hard to create the grid for the calendar, but I want to have a popup that appears when I click a slot on the calendar. Just like in Google Calendar, when you click a slot, a pop-up appears and you can edit your new event. I want to do something like that where the event will be created and then stored in the backend SQL file that I have.
This is the code I have currently:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Week View</h2>
<table>
<tr>
<th>Time</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>6:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
and this basically shows this
basic time schedule
I want to make the empty slots like some kind of button and that, when clicked, will open up a popup that will give me the option to choose the time of the event I want to place. After 'saving' this event, I want to send this info to my SQL database and then this block will then be disabled. I have already looked into existing websites that provide code for calendars, but I prefer to do it on my own (please don't send me back to fullcalendar). How do I make these empty slots, like buttons, that will open up a popupform?
Let me know if there is anything you want me to clarify. Thanks!

You could place a <div> in each <td> and assign 'onclick' method to run JS function.
In your JS function, use createElement to create a popup <div> and appendChild it to body. Then you will see the popup.

how can i put <td> on table cells?

First I made a table that have date titles in different format such as number of the gregorian date and name of the days of the Week and number of the persian date.
I want to color them when I select some cells and display them as a cell where text can be written inside such as below image:
![The desired table photo][1]
please help me to edit codes for create a table such as top image.
The table I made is as follows:
let jyear = moment().locale('fa').format('YYYY');
let jmonth = moment().locale('fa').format('M');
console.log("jyear", jyear);
console.log("jmonth", jmonth);
var d = new Date();
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.getElementById("EN-Year").innerHTML = d.getFullYear();
document.getElementById("EN-Month").innerHTML = months[d.getMonth()] + '-' + months[d.getMonth() + 1];
document.getElementById("shamsi_year").innerHTML = jyear;
document.getElementById("shamsi_month").innerHTML = moment().locale('fa').format('jMMMM');
document.getElementById("shamsi_month2").innerHTML = moment().locale('fa').format('jMMMM');
renderHeaderGrid(jyear, jmonth);
function renderHeaderGrid(jyear, jmonth) {
let jDate = moment.from(`${jyear}/${jmonth}/01`, 'fa', 'YYYY/MM/DD');
jDate = jDate.locale("fa");
let daysInMonth = jDate.daysInMonth();
let miladi_date = jDate.locale("en");
for (let i = 0; i < daysInMonth; i++) {
let miladiDayNameInWeek = miladi_date.format("dd"); //miladi day name of weeek
let miladiDayInMonth = miladi_date.format("DD"); //miladi day num
let shamsiDayInMonth = jDate.format("jDD"); //shamsi day num
let th_week_name = document.createElement("th");
let th_day_num = document.createElement("th");
let th_shamsi_day_num = document.createElement("th");
th_week_name.innerText = miladiDayNameInWeek;
th_day_num.innerText = miladiDayInMonth;
th_shamsi_day_num.innerText = shamsiDayInMonth;
document.getElementById("tr_days_name").append(th_week_name);
document.getElementById("tr_days_num").append(th_day_num);
document.getElementById("tr_days_shamsi_num").append(th_shamsi_day_num);
miladi_date.add(1, "d");
}
}
* {
direction: rtl;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
position: relative;
}
.table {
width: 100%;
}
.month {
background-color: orange;
}
.place {
background-color: rgb(77, 207, 77);
}
.other,
.title {
background-color: rgb(141, 140, 140);
}
<table id="ttt" class="table" border="1" summary="This table gives some statistics about fruit
flies: average height and weight, and percentage
with red eyes (for both males and females).">
<caption>
<EM>A test table with merged cells</EM>
</caption>
<tr>
<th class="title" colspan="34"></th>
</tr>
<tr id="tr_days_name">
<th colspan="4">DAY</th>
</tr>
<tr id="tr_days_num" colspan="2">
<th id="EN-Year" colspan="2"></th>
<th id="EN-Month" class="month" colspan="2"></th>
</tr>
<tr rowspan="1" colspan="2" id="tr_days_shamsi_num">
<th id="shamsi_year" colspan="2"></th>
<th id="shamsi_month" class="month" colspan="2"></th>
</tr>
<tr id="firstplace">
<th id="shamsi_month2" colspan="2" rowspan="6"></th>
<th class="place" colspan="2"></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="place" colspan="2"></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="place" colspan="2"></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="place" colspan="2"></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="place" colspan="2"></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="other" colspan="2"></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="https://unpkg.com/jalali-moment/dist/jalali-moment.browser.js"></script>

Hope this gives you an idea:
const cells = document.querySelectorAll(".cell");
cells.forEach((cell, i) => {
cell.addEventListener("click", () => {
cell.innerHTML = `<input type="text" id="cell-input_${i}">`
const cellInput = document.querySelector(`#cell-input_${i}`)
cellInput.focus()
cellInput.addEventListener("blur", () => {
cell.innerHTML = cellInput.value
});
});
});
.cell {
border: 1px solid black;
height: 20px;
min-width: 20px;
}
<table>
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</table>

How to get random numbers in a table cell in html using javascript

I want to generate number "1" in random cells from my table. There is a game like: you will select a table by pressing a button, after press play. When you will press play I want to put random the number "1" but not in all cells. (e.g: if table is 8x8, put 8 of "1" in the table, if table is 6x6, put 6 of "1" in the table and so on...) I create 3 tables in html and put them hidden with javascript.
Now I want some hints, some help from you guys. Thank you! Here is my code:
//Variables
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var button3 = document.getElementById('button3');
var backBtn = document.getElementById('back-btn');
var playBtn = document.getElementById('play-btn');
var sixTable = document.getElementById('sixXsix');
var eightTable = document.getElementById('eightXeight');
var steenTable = document.getElementById('steen');
//Visibility starter
sixTable.style.display = 'none';
eightTable.style.display = 'none';
steenTable.style.display = 'none';
backBtn.style.display = 'none';
playBtn.style.display = 'none';
//Buttons function
button1.onclick = function() {
var six = document.getElementById('sixXsix');
var eight = document.getElementById('eightXeight');
var steen = document.getElementById('steen');
if (six.style.display === 'none') {
six.style.display = 'block';
eight.style.display = 'none';
steen.style.display = 'none';
button1.style.display = 'none';
button2.style.display = 'none';
button3.style.display = 'none';
backBtn.style.display = 'block';
playBtn.style.display = 'block';
}
}
button2.onclick = function() {
var six = document.getElementById('sixXsix');
var eight = document.getElementById('eightXeight');
var steen = document.getElementById('steen');
if (eight.style.display === 'none') {
six.style.display = 'none';
eight.style.display = 'block';
steen.style.display = 'none';
button1.style.display = 'none';
button2.style.display = 'none';
button3.style.display = 'none';
backBtn.style.display = 'block';
playBtn.style.display = 'block';
}
}
button3.onclick = function() {
var six = document.getElementById('sixXsix');
var eight = document.getElementById('eightXeight');
var steen = document.getElementById('steen');
if (steen.style.display === 'none') {
six.style.display = 'none';
eight.style.display = 'none';
steen.style.display = 'block';
button1.style.display = 'none';
button2.style.display = 'none';
button3.style.display = 'none';
backBtn.style.display = 'block';
playBtn.style.display = 'block';
}
}
backBtn.onclick = function() {
sixTable.style.display = 'none';
eightTable.style.display = 'none';
steenTable.style.display = 'none';
backBtn.style.display = 'none';
playBtn.style.display = 'none';
button1.style.display = 'block';
button2.style.display = 'block';
button3.style.display = 'block';
}
playBtn.onclick = function() {
}
<div id="buttons">
<button id="button1">6x6 Table</button>
<button id="button2">8x8 Table</button>
<button id="button3">16x16 Table</button>
<button id="back-btn">Back</button>
<button id="play-btn">Play</button>
</div>
<div id="table">
<div id="sixXsix">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="eightXeight">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="steen">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>

This below code uses jquery to generate random numbers between 1 and the number of cells and then places a 1 in the corresponding cell.
If any of it is not clear, let me know.
Hope this helps.
$('#playBtn').on('click', function() {
var cellsCount = $('#table1 td').length;
var rows = $('#table1 tr').length;
var usedCells = [];
if (rows != $("#table1 tr:first-child td").length) {
alert("The grid is not a square, I dont know how many cells to mark.");
return;
}
// empty all cells first
$("#table1 td").empty();
$("#table1 td").css("background-color", "white");
// generate random numbers between 1 and the number of cells available
// (no duplicates)
while (usedCells.length < rows) {
randCell = Math.floor(Math.random() * cellsCount);
if (usedCells.indexOf(randCell) == -1) {
usedCells.push(randCell);
}
}
// for each number generate, color the cell and add the "1"
$.each(usedCells, function(index, value) {
cell = "#table1 td:eq(" + value + ")";
$(cell).html("1");
$(cell).css("background-color", "red");
});
});
td {
border: 1px solid black;
height: 25px;
width: 25px;
text-align: center;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="playBtn">Play</button>
<br>
<table id="table1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

This snippet uses a templating method (interpolate) to create a nXn table containing n random cells with value 1. See this git-repo for usage of interpolate.
(function () {
String.prototype.interpolate = function (tokens) {
return interpolate(this, tokens);
};
document.querySelector("#buttons")
.addEventListener('click', createTable);
document.querySelector("#button1").click();
function createTable(evt) {
const origin = evt.target;
if ( !/button/i.test(origin.nodeName)) { return; }
const size = origin.getAttribute('data-table')
.split('x')
.reduce(function (a, b, i) {
i == 1 ? a.rows = +b : a.cols = +b; return a;
}, {} );
size.totalCells = size.rows * size.cols;
const fillCells = getUniqueRandomValues(size.cols, size.totalCells);
let cellCount = 0;
const rowCells = () => '<td{hasValue}> </td>'
.interpolate( Array(size.rows).join(",").split(",")
.map( () => {
return {
hasValue: fillCells.indexOf(cellCount++) > -1
? " class=\"hasValue\""
: ""
};
}
)
);
const rows = '<tr>{cell}</tr>'.interpolate(
Array(size.rows).join(",").split(",")
.map( () => { return { cell: rowCells() }; } )
);
const header = ('<tr><td colspan="{colsize}" class="header">' +
'{rowsize} rows, {colsize} columns</td><tr>')
.interpolate({colsize: size.cols, rowsize: size.rows});
document.querySelector("#result").innerHTML =
'<table>{rows}</table>'
.interpolate( { rows: header + rows });
}
function getUniqueRandomValues(nValues, maxRandomValue) {
let existing = {};
maxRandomValue -= 1;
const randomUnique = () => {
const rndm = Math.floor(1 + Math.random() * maxRandomValue);
const exists = existing[rndm];
if ( !exists ) { existing[rndm] = 1; }
return exists ? randomUnique() : rndm;
};
return Array(nValues).join(",").split(",")
.map( () => randomUnique() ) ;
}
function interpolate(string2Interpolate, tokens) {
if (!(tokens instanceof Array) && tokens instanceof Object) {
tokens = [tokens];
} else if (!(tokens instanceof Object)) {
return string2Interpolate;
}
let replacer = function (token) {
return function (t, t1, t2) {
return token[t2] === ''
? String.fromCharCode(0)
: token[t2] || t;
};
}
let str = string2Interpolate;
return tokens.map(function (token) {
return str.replace(/(\{?)([a-z_0-9]+)(\})/gi, replacer(token));
}).join('').replace(RegExp(String.fromCharCode(0), "g"), '');
}
}());
body { font: 12px verdana, arial; }
table { margin-top: 1em; }
table td {
text-align: right;
border: 1px solid #c0c0c0;
padding: 2px;
min-width: 1.2em;
min-height: 1.2em;}
table td.header {
background-color: black;
color: white;
text-align: center;
}
td.hasValue {
background-color: green;
color: white;
}
td.hasValue:before {
content: "1";
}
<div id="buttons">
<button id="button1" data-table="6x6">
6x6 Table
</button>
<button id="button2" data-table="8x8">
8x8 Table
</button>
<button id="button3" data-table="16x16">
16x16 Table
</button>
</div>
<div id="result"></div>

Issue with centering and coloring a grid

I'm trying to make essentially a 16x16 etch-a-sketch. I've finally created a grid, however unless I put data in it it ends up looking screwed up. I can't center the grid, nor can I get the color to evenly cover the grid.
What am I doing wrong?
(JSFiddle)
$(document).ready(function() {
$(td).hover(function() {
(this).css("background-color", "black");
});
});
table {
position: relative;
background-color: gray;
}
h1 {
padding: 1%;
background-color: red;
font-family: Cursive;
color: yellow;
width: 90%;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<h1 align="center"> My Etch-a-Sketch game</h1>
<table style="width:600px;">
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
<tr>
<div class="boxes" style="width: 60px; height: 60px; border: none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</div>
</tr>
</table>
</body>
</html>

You cannot put <div> directly into <tr>.
$(document).ready(function() {
$('td').hover(function() {
$(this).css("background-color", "black");
});
});
table {
position: relative;
background-color: gray;
}
h1 {
padding: 1%;
background-color: red;
font-family: Cursive;
color: yellow;
width:90%;
position: relative;
}
td {
width: 60px;
height: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center"> My Etch-a-Sketch game</h1>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Mainly just syntax errors and typos.
One main thing is that div elements cannot be children of tr elements, but they were unnecessary.
$(td) should be $('td')
(this) should be $(this)
$(document).ready(function() {
$('td').hover(function() {
$(this).css("background-color", "black");
});
});
body {
margin: 0;
}
table {
background-color: gray;
width: 100vmin;
height: 100vmin;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
But this is how I would do it.
$(document).ready(function() {
var t = $('<table/>'), r = $('<tr/>'), x = 16, y = 16;
for(var i = 1; i <= (x * y); ++i) {
if(i % y === 0 && t.append(r)) r = $('<tr/>');
r.append($('<td/>'));
}
$('body').append(t);
$('td').hover(function() {
$(this).css("background-color", "black");
});
});
body {
margin: 0;
}
table {
background-color: gray;
width: 100vmin;
height: 100vmin;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>