Creating a dynamic grid of divs with Javascript
36,452
Something along these lines should work for ya.
<html><head>
<script language="javascript">
function genDivs(v){
var e = document.body; // whatever you want to append the rows to:
for(var i = 0; i < v; i++){
var row = document.createElement("div");
row.className = "row";
for(var x = 1; x <= v; x++){
var cell = document.createElement("div");
cell.className = "gridsquare";
cell.innerText = (i * v) + x;
row.appendChild(cell);
}
e.appendChild(row);
}
document.getElementById("code").innerText = e.innerHTML;
}
</script>
</head>
<body>
<input type="button" onclick="genDivs(6)" value="click me">
<code id="code"></code>
</body>
</html>
Results:
<div class="row">
<div class="gridsquare">
1
</div>
<div class="gridsquare">
2
</div>
<div class="gridsquare">
3
</div>
<div class="gridsquare">
4
</div>
<div class="gridsquare">
5
</div>
<div class="gridsquare">
6
</div>
</div>
<div class="row">
<div class="gridsquare">
7
</div>
<div class="gridsquare">
8
</div>
<div class="gridsquare">
9
</div>
<div class="gridsquare">
10
</div>
<div class="gridsquare">
11
</div>
<div class="gridsquare">
12
</div>
</div>
<div class="row">
<div class="gridsquare">
13
</div>
<div class="gridsquare">
14
</div>
<div class="gridsquare">
15
</div>
<div class="gridsquare">
16
</div>
<div class="gridsquare">
17
</div>
<div class="gridsquare">
18
</div>
</div>
<div class="row">
<div class="gridsquare">
19
</div>
<div class="gridsquare">
20
</div>
<div class="gridsquare">
21
</div>
<div class="gridsquare">
22
</div>
<div class="gridsquare">
23
</div>
<div class="gridsquare">
24
</div>
</div>
<div class="row">
<div class="gridsquare">
25
</div>
<div class="gridsquare">
26
</div>
<div class="gridsquare">
27
</div>
<div class="gridsquare">
28
</div>
<div class="gridsquare">
29
</div>
<div class="gridsquare">
30
</div>
</div>
<div class="row">
<div class="gridsquare">
31
</div>
<div class="gridsquare">
32
</div>
<div class="gridsquare">
33
</div>
<div class="gridsquare">
34
</div>
<div class="gridsquare">
35
</div>
<div class="gridsquare">
36
</div>
</div>
Author by
Rowan
Updated on May 22, 2020Comments
-
Rowan about 4 years
I want to create a grid of HTML divs that will have the same number of rows and columns but with the number of rows/columns being based on a particular number that would be passed to the Javascript function.
e.g. if the number is 3 the grid will be 3 rows and 3 columns
if the number is 4 the grid will be 4 rows and 4 columns..etc
in the case of 3 the outputted code would need to look something like:
<div class="row"> <div class="gridsquare">1</div> <div class="gridsquare">2</div> <div class="gridsquare">3</div> </div> <div class="row"> <div class="gridsquare">4</div> <div class="gridsquare">5</div> <div class="gridsquare">6</div> </div> <div class="row"> <div class="gridsquare">7</div> <div class="gridsquare">8</div> <div class="gridsquare">9</div> </div>What is a good way of iterating through javascript so that the correct elements can be identified to add the row div opening or closing tags (?)