For Loop In HTML Table Using JavaScript
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of for loop in HTML table using JavaScript and how we are able to use for loop in HTML with the help of JavaScript in HTML table.
For, example for some task we have to create a table in which there are more than 100 cells, like there may be 10 rows and 10 columns or more.
In this type of table, it seems difficult to done this because you have to fill data in 100 cells say you have to create 100 td tags that are paired again.
Also, it may confuse someone in his/her task. Hence, let us understand how we able to create a table in html and use for loop with JavaScript in them.
Step By Step Guide On For Loop In HTML Table Using JavaScript :-
Now, here below we will show you how to create a table with the help of for loop using JavaScript.
In this code, we are going to create 20 cells, with the help of 5 rows and 4 columns. In each cell, we will display you the rows and the column number. We hope that you understand codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="main" >
<div class="inner" style="font-size: 25px;" >
<script>
document.write(" <table border=2px solid black>")
for (rows = 1; rows <= 4; rows++) {
document.write(" <tr> ")
for (col = 1; col <= 5; col++) {
document.write(" <td style= padding:10px > Row number is " + rows + " <br> Column number is " + col + " </td> ")
}
document.write(" </tr> ")
}
document.write(" </table> ")
</script>
</div>
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, in head we link a jQuery cdn.js file. With the help of this file, we complete our article.
- Here in body, we create body tag that is a paired tag. All the content with you want to show on browser’s screen in written here.
- Here, we first create two div’s that are main and inner. And under inner we use JavaScript code, let us understand.
- Here, we create script tag that is paired tag and under this tag we write our JavaScript code.
- First, we use document.write to create a table. Table tag is created under this line.
- In our next step, we use for loop for rows. Here, we start from 1 and end at 4. You can see the condition from codes given above.
- Again with the help of document.write we create tr that is table row and then we use another for loop for columns. As here we want to create 5 columns so we start loop from 1 and end at 5.
- In this for loop we create our cells, with the help of td and document.write property. The value of row is get from row variable, where we get value of columns from column variable.
- After this we close our paired tags that are tr and table with help of document.write.
- One thing about for loop is to know about its syntax. That is as: for ( variable initializes, condition checking, incrementing variable ){#code…………}
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here with the help of this article we are able to understand the concept of html table with for loop using JavaScript.
We hope that you able to understand article properly. In, next article we are going to understand the same concept using jQuery. I hope this tutorial on for loop in HTML table using JavaScript helps you.
About Amruta
