Javascript使用for循环和数组创建表答案

【问题标题】：Javascript create table with for loop and arrayJavascript使用for循环和数组创建表
【发布时间】：2017-06-16 07:12:48
【问题描述】：

我正在尝试基于数组和 for 循环生成一个表。我已经尽力自己解决这个问题，但没有结果。在 for 循环中，您可以看到我尝试过但没有结果。我希望表格只从数组和 for 循环中生成，它看起来像这样：

|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   |

这是我的代码：

<!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>

【问题讨论】：

请注意，TR 用于行，因此您正在创建行但没有单元格TD

标签： javascript arrays loops for-loop html-table

【解决方案1】：

首先，您的 for 循环不使用测量数组或年份数组 - 您只是添加树数组中的元素。第二点 - 您在每次循环迭代中为“Tresort”制作一行。

最后，您的结果将具有

的值

"<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>"

这不是你想要的。此外，在循环的第二行中，您要在关闭 th 标签之前关闭 tr 标签，这也可能导致错误。

【讨论】：

【解决方案2】：

基于代码的简单解决方案 (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;

【讨论】：