Menu
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 (?)
454
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>
var n=4;//take grid column value as you want
for(var i = 0; i < n; i++) {
document.body.innerHTML+='<div class="row">';
for(j = 0; j < n; j++) {
document.body.innerHTML+='<div class="gridsquare">' + (i*5+j+1) + '</div>';
}
document.body.innerHTML+='</div>';
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With