Use javascript to display information in a table

Question

I need to write a script that displays the first 20 numbers in the fibonacci sequence in a web page. It also has to display these numbers in a table that is one column wide and 20 rows long. My javascript to display the numbers works, but I can't figure out how to get them to display in a table.

This is what I have so far:

   <script type="text/javascript">
        <!--

            var var1 = 0;
            var var2 = 1;
            var var3;

            var num = 20;

            document.write("<tr><td>"+var1+"</td></tr>");
            document.write("<tr><td>"+var2+"</td></tr>");

            for(var i=3; i <= num;i++)
            {
                var3 = var1 + var2;
                var1 = var2;
                var2 = var3;

                document.write("<tr><td>"+var3+"</td></tr>");
            }

        // -->
   </script>

we were instructed to use document.write() to display the information. — , Feb 25 '14 at 17:51
http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — bjb568, Feb 25 '14 at 17:54
Yes, I see that it is "bad practice" but that doesn't change the fact that it was part of the requirements. — , Feb 25 '14 at 18:02

score 2 · Answer 1 · answered Feb 25 '14 at 17:40

2

You need a <table> and <tbody> for it to work.

document.write("<table><tbody>");
//create the table contents
document.write("</tbody></table>");

answered Feb 25 '14 at 17:40

bjb568

9,826
11
45
66

score 0 · Accepted Answer · answered Feb 25 '14 at 17:41

Seems to me you are just missing the table element in the beginning and the end:

document.write("<table><tbody>");
        var var1 = 0;
        var var2 = 1;
        var var3;

        var num = 20;

        document.write("<tr><td>"+var1+"</td></tr>");
        document.write("<tr><td>"+var2+"</td></tr>");

        for(var i=3; i <= num;i++)
        {
            var3 = var1 + var2;
            var1 = var2;
            var2 = var3;

            document.write("<tr><td>"+var3+"</td></tr>");
        }
document.write("</tbody></table>");

score 0 · Answer 3 · answered Feb 25 '14 at 17:46

        var var1 = 0,
            var2 = 1,
            var3 = 1,
            data = [0,1],
            html = '',
            num = 20;

        for(var i=3; i <= num;i++)
        {
            var3 = var1 + var2;
            var1 = var2;
            var2 = var3;

            data.push(var3);
        }
        html = "<table><tbody><tr><td>" + data.join("</td></tr><tr><td>") + "</td></tr></tbody></table>";
        document.write(html);

http://jsfiddle.net/4ea4d/

Use javascript to display information in a table

3 Answers3