php - to draw multiple divs in HTML - php

Question

Below is my html code. It's basically a grid of squares - here:
<div class='square-container'>
<div class='trigger'>
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back</p>
</div>
</div>
</div>
</div>
<div class='trigger'>
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back</p>
</div>
</div>
</div>
</div>
<div class='trigger'>
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back</p>
</div>
</div>
</div>
</div>
</div>
As you can see in the above code, I have multiple divs (class trigger)
Ideally I'd like to draw a set of squares of 30x10 - 300 squares. It would be tedious to manually put the class trigger one by one. Is there a way I can draw this div square dynamically?

Answer 1

Try this:
<div class='square-container'></div>
Using Jquery, change the value of the variable: 'number_square' according to squares that you need draw.
<script>
$(document).ready(function () {
var number_square = 3;
var drawdiv = "<div class='trigger'><div class='hover panel'><div class='front'><div class='box1'><p>Front</p></div></div><div class='back'><div class='box2'><p>Back</p></div></div></div></div>";
for (i = 0; i < number_square; i++) {
$('.square-container').append(drawdiv);
}
$('.trigger').click(function () {
$('.modal-wrapper').toggleClass('open');
$('.square-container').toggleClass('blur');
return false;
});
$('.hover').hover(function () {
$(this).addClass('flip');
}, function () {
$(this).removeClass('flip');
});
});
</script>

Answer 2

IF you take the forst example on php.net and make it run 30 times for row,
for ($row = 1; $row <= 30; $row++) {
}
and take another one to make 10 columns :
for ($col = 1; $col <= 10; $col++) {
}
and put them one inside the other:
for ($row = 1; $row <= 30; $row++) {
//echo new row (ei: <div>)
for ($col = 1; $col <= 10; $col++) {
//echo cell <div>...</div>
}
//echo end row (ei: </div>)
}