I have a div with an 8x8 grid and I am looking to practice using jQuery. How can I determine which row and column a specific div was clicked on? I attempted to use event.pageX and event.pageY, but these only provide the click coordinates rather than the specific row and column.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
<title></title>
</head>
<body>
<div id="gameArea"></div>
</body>
</html>
There is also a CSS file included:
body {
margin: 0;
padding: 20px;
}
.tile {
position: absolute;
background-color: rgb(115, 255, 50);
cursor: pointer;
}
.tile:hover {
background-color: darkgreen;
}
.disabled {
background-color: black;
border:1px solid black;
}
.enabled{
background-color: white;
border: 1px solid white;
}
#gameArea {
background-color: black;
position: relative;
padding: 0px;
border: 2px solid black;
}
Below is the JavaScript code in my JS file:
const max_clicks = 3;
const table_sz = 8;
const tile_sz = 88;
const border_w = 4;
const margin_w = 2;
let game_area;
function createTile(row, col){
let tile;
if ((row + col) % 2 === 0){
tile = $('<div class = "tile disabled"></div>');
}
else{
tile = $('<div class = "tile enabled"></div>');
tile.attr('clicks', 0);
}
tile.css("margin", margin_w.toString() + "px");
tile.css("border-width", border_w.toString() + "px");
tile.attr('row', row);
tile.attr('col', col);
tile.css( {
top: row * (tile_sz + 2 * (border_w + margin_w) ),
left: col * (tile_sz + 2 * (border_w + margin_w) ),
height: tile_sz,
width: tile_sz,
} );
return tile;
}
function createTable(){
for (let row = 0; row < table_sz; ++row){
for (let col = 0; col < table_sz; ++col) {
let tile = createTile(row, col);
game_area.append(tile);
}
}
}
function createGameArea(){
game_area = $('#gameArea');
game_area.css( {
height: 800,
width: 800
} );
}
function selectTileAt(position){
return $(".tile[row=" + position[0].toString() + "][col=" + position[1].toString() + "]");
}
$(document).ready(function(){
createGameArea();
createTable();
} );