Javascript create table with for loop and array

Question

I am trying to generate a table based on arrays and for loops. I have tried my best to solve this on my own With no result. In the for loop you can see that I have tried but With no result. I want the table to only generate from the arrays and for loop and it to look like this:

|Tresort | 1915 | 1950 | 1970 | 1990 | 1992 | 2000 |
|Furu    | 20   | 31   | 53   | 89   | 102  | 117  |
|Gran    | 23   | 39   | 72   | 89   | 92   | 99   |
|Lauvtre | 4    | 6    | 8    | 12   | 15   | 18   |

Here is my code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

    <table id="tabell" border="1px">


    </table>


    <script>


        function tabellOp() {
            var measurement = [ [20,31,53,89,102,117], [23,39,72,89,92,99], [4,6,8,12,15,18] ];
            var tree = ["furu", "gran", "lauvtre"];
            var year = [1915,1950,1970,1990,1992,2000]
            var tabellget = document.querySelector("#tabell");
            var row="";

            for(var i =0;i<tree.length;i++) {
                row = "<tr><th> Tresort</th></tr>";
                row += "<tr><th>" + tree[i] + "</tr></th>";
            }
            tabellget.innerHTML = row;

        }
        window.onload=tabellOp;


    </script>
</body>
</html>

Note that TR is for rows, so you are creating rows but no cells TD — Ibu
– Ibu, Commented Jan 31, 2017 at 0:06

Iana Andrychowicz · Accepted Answer · 2017-01-31 00:54:22Z

0

First of all, your for loop does not make use of the measurement array or the year array - you're just adding the elements from the tree array. The second point - you're making a row for "Tresort" in each loop iteration.

At the end, your result will have the value of

"<tr><th>Tresort</th></tr>
<tr><th>furu</th></tr>
<tr><th>Tresort</th></tr>
<tr><th>gran</th></tr>
<tr><th>Tresort</th></tr>
<tr><th>lauvtre</th></tr>"

which is not what you want. Also, in the second line of your loop you're closing tr tag before closing the th tag, which could also cause errors.

answered Jan 31, 2017 at 0:54

Iana Andrychowicz

112 bronze badges

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

Comments

gilchris · Accepted Answer · 2017-01-31 01:11:57Z

simple solution your code based (see on jsfiddle)

function tabellOp() {
  var measurement = [ [20,31,53,89,102,117], [23,39,72,89,92,99], [4,6,8,12,15,18] ];
  var tree = ["furu", "gran", "lauvtre"];
  var year = [1915,1950,1970,1990,1992,2000];
  var tabellget = document.querySelector("#tabell");
  var row = "<tr><th> Tresort</th>";

  for (var i = 0; i < year.length; i++) {
    row += "<th>" + year[i] + "</th>";
  }
  row += "</tr>";

  for (var i = 0; i < tree.length; i++) {
    row += "<tr><th>" + tree[i] + "</th>";
    for (var j = 0; j < measurement[i].length; j++) {
      row += "<td>" + measurement[i][j] + "</td>";
    }
    row += "</tr>";
  }

  tabellget.innerHTML = row;
}
window.onload = tabellOp;

Collectives™ on Stack Overflow

Javascript create table with for loop and array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related