Generate Html table using for loop

Question

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>

Didn't you just post the same question at stackoverflow.com/questions/9751799/… ? — j08691
– j08691, Commented Mar 17, 2012 at 17:10
Ya @ j08691 but this time ,I have clarified my query along with detailed explanation of the question! Since my early query was closed without being answered , I have posted new Q. — hero123
– hero123, Commented Mar 17, 2012 at 17:11
I am confused. At least format the coding part of your question properly. — Indi
– Indi, Commented Mar 17, 2012 at 17:15
@ Kaf, what else needs to be provided I have used javascript that will be embeded in head section of my Html page,Hope it is now clarified to u? — hero123
– hero123, Commented Mar 17, 2012 at 17:17

ajax333221 · Accepted Answer · 2012-03-17 17:52:42Z

10

You can try something like this:

var mytable = "<table cellpadding=\"0\" cellspacing=\"0\"><tbody><tr>";

for (var i = 1; i < 31; i++) {
  if (i % 3 == 1 && i != 1) {
    mytable += "</tr><tr>";
  }
  mytable += "<td>[" + i + "]</td>";
}

mytable += "</tr></tbody></table>";

document.write(mytable);

Here is a jsFiddle demo

edited Mar 17, 2012 at 17:52

answered Mar 17, 2012 at 17:21

ajax333221

11.8k16 gold badges64 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

msigman · Accepted Answer · 2012-03-18 04:37:04Z

1

This is untested psuedo-code, but may help you get started:

var x, row;
for(x=1;x<10;x=x+row)
{
    document.write('<tr>');
    for(row=0;row<2;row++)
    {
        document.write('<td>' + (x + row));
        // Whatever else you want to output
    }
}

Edit: this answer was given before OP edited his question to add additional info.

edited Mar 18, 2012 at 4:37

answered Mar 17, 2012 at 17:13

msigman

4,5343 gold badges23 silver badges32 bronze badges

Comments

Brouwer · Accepted Answer · 2012-03-17 17:15:54Z

0

Use the modulo operator % to check for 3rd numbers and set the tags accordingly.

http://en.wikibooks.org/wiki/C_Sharp_Programming/Operators

answered Mar 17, 2012 at 17:15

Brouwer

6811 gold badge4 silver badges17 bronze badges

Collectives™ on Stack Overflow

Generate Html table using for loop

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related