How to use a nested loop in HTML
In this tutorial, we are make to demonstrate how to use a nested loop in HTML and Javascript to create a beautiful calendar design. I hope you will learn something from this code.
A nested loop is a loop within the loop, the loop is a two-dimension inner loop, and the outer loop .inner loop is nested inside the outer loop.
Read also:
How does the loop work?
First, we are initial the value that the value first passes to the outer loop triggers the inner loop which executes the process. and then the second pass of the outer loop triggers the inner loop again and again till the statement to an end.
for( var i= 0 ;i<10;i++){
for(var j=0;j<10;j++){
//something else
}
}
<html>
<head>
<title>Nested Loop in HTML</title>
</head>
<body>
<h1 style="text-align: center;">DailyAspirants.com DEMO</h1>
<div>
<ul class="weekdays">
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li>sun</li>
</ul>
</div>
<div id="days"></div>
<div class="bottom"></div>
</body>
</html>
The first loop is usually called the outer loop. and then runs the outer loop and inner loop up to 10 times each .inner loop execute the individual digits while the outer loop call, again and again, determines how many times the task is repeated.
For Example : If you're reading a book and book file line by line and for each line should be count how many times the line is in there till the end of the statement.
ul
{
list-style-type: none;
}
.weekdays
{
width:738px;
margin: 0 auto;
padding: 10px 0;
background-color:#1abc9c;
}
.weekdays li
{
display: inline-block;
width: 13.6%;
color: #fff;
text-align: center;
}
#days
{
width:738px;
padding:10px 0;
background:#eee;
margin:0 auto;
}
td
{
padding:41px;
font-size:20px;
color: #777;
}
td:hover
{
background: #1abc9c;
color: white !important
}
.active
{
background-color: #009688;
color:#fff;
}
.bottom
{
margin-bottom: 30px;
}
A Nested loop using HTML and javascript creates a beautiful calendar design and displays it below. how the calendar looks like and you have copied the code and test on your browser.
var days= document.getElementById('days');
var table=document.createElement("table");
var rows=5;
var cols=7;
var counter=1;
var todaysDate = new Date().getDate();
for(var i=1;i<=rows;i++){
var tr=document.createElement("tr");
for(var j=1;j<=cols;j++)
{
var td=document.createElement("td");
var cellText =document.createTextNode(counter);
if(counter==todaysDate){td.className="active";}
if(counter<=31){
++counter;
}
else
{
break;
}
td.appendChild(cellText);
tr.appendChild(td);
}
table.appendChild(tr);
}
days.appendChild(table);
Output Result :
I hope you will learn how to use the nested loop in HTML and javascript to create a beautiful calendar and loop block of statements. Keep support us and copy code and tested on your browser and download the code link below.