For loop table in html

Please help with below mentioned scenario->

I am having wanna display values from 1 to 30 in a table such a way that nos 1,2,3 should come in one tag and like wise 4,5,6 in other tr tag ans so on till 30 value. I wanna use table for displaying values in a element of a table. wherein each value like "1" should display in one , no "2" should display in different <TD> and so on.

I mean to say that value "1" should be displayed in single <TD> of <Table> tag ,value "2" should be displayed in another <td> tag and so on ,Also after three subsequent <TD>s one <Tr> should be used. Output should be as folllows ->

1 2 3 
4 5 6
7 8 9

and so on!

Early response would be much appreciated. Thanks.

I have tried Code as given below,

<script type="text/javascript">

    document.write("        <table width='673' align='center' cellpadding='2' cellspacing='1'>");
    document.write("            <tr>");
    document.write("    <td valign = 'top'>");
    document.write("                </td>");

    document.write("            </tr>");

    var cnt = 0;
    for (var idx = 1; idx <= 30; idx++) 
    {
        cnt = cnt + 1;
        document.write("            <tr>");
            document.write("    <td valign = 'top'>");
            document.write("        <table width='100px' align='center' cellpadding='2' cellspacing='1'>");
            document.write("            <tr>");
            document.write("                <td align='center'>");
            document.write("                   " + idx + "");
            document.write("                </td>");
            document.write("            </tr>");
            document.write("            <tr>");
            document.write("                <td class='label'>");
            document.write("                    <span> name part : " + idx + "</span>");
            document.write("                </td>");
            document.write("            </tr>");
            document.write("            </table>");
            document.write("                </td>");
            if (cnt = 3) 
            {
                document.write("            </tr>");
            }
            if (cnt = 3) {
                cnt = 0;
            }

        }

    document.write("            </table>");
</script>

Last Updated : May 5, 2022

IN - HTML JavaScript

For loop table in html

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>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Here, in head we link a jQuery cdn.js file. With the help of this file, we complete our article.
  6. 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.
  7. Here, we first create two div’s that are main and inner. And under inner we use JavaScript code, let us understand.
  8. Here, we create script tag that is paired tag and under this tag we write our JavaScript code.
  9. First, we use document.write to create a table. Table tag is created under this line.
  10. 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.
  11. 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.
  12. 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.
  13. After this we close our paired tags that are tr and table with help of document.write.
  14. One thing about for loop is to know about its syntax. That is as: for ( variable initializes, condition checking, incrementing variable ){#code…………}
  15. 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.

How do you create a loop table in HTML?

“using a for loop to create a table javascript” Code Answer.
var table = document. getElementById("myTable");.
for (let i in table. rows) {.
let row = table. rows[i].
//iterate through rows..
//rows would be accessed using the "row" variable assigned in the for loop..
for (let j in row. ... .
let col = row. ... .
//iterate through columns..

How do you use a loop in a table?

Algorithm. Step 1: Enter a number to print table at runtime. Step 2: Read that number from keyboard. Step 3: Using for loop print number*I 10 times. // for(i=1; i<=10; i++) Step 4: Print num*I 10 times where i=0 to 10.

How do you create a loop in a table?

var table = document. createElement('table'), tr, td, i; for (i = 0; i < 220; i++) { if (i % 22 == 0) { // every 22nd cell (including the first) tr = table. appendChild(document. createElement('tr')); // add a new row } td = tr.

Can we use for loop in HTML?

Approach 1: Using the for loop: The HTML elements can be iterated by using the regular JavaScript for loop. The number of elements to be iterated can be found using the length property. The for loop has three parts, initialization, condition expression, and increment/decrement expression.

Tải thêm tài liệu liên quan đến bài viết For loop table in html