2017-01-31 13 views
0

私は配列とforループに基づいてテーブルを生成しようとしています。私は自分自身でこれを解決するために最善を尽くしましたが、結果はありませんでした。 forループでは、私が試したことがわかりますが、結果はありません。ループと配列のためのJavascriptの作成テーブル

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

あなたが行を作成しているので、TRは、行のためであることに注意してくださいが、細胞なし 'TD' – Ibu

答えて

0

はあなたが組織してきた道を絶対にコミットしている私は、配列のみから、ループのために生成し、それがこのように見えるようにするテーブルが欲しいですあなたのデータ?なぜなら、あなたの配列をおそらくオブジェクトに並べ替えることによって利益を得るかもしれないからです。

+0

、あなたが見ることができますか?ありがとう –

+0

私はあなたが見たいものの線に沿ってより多くのデータを形成することをお勧めします。たとえば、配列の最初のインデックスはすべてのテーブルヘッドの配列になり、その後の各インデックスは行になります。 – MrFarberToYou

0

まず、forループは測定配列または年配列を使用しません。ツリー配列から要素を追加するだけです。第2のポイント - 各ループ反復で「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>" 

の値を持つことになります。また、ループの2行目では、タグを閉じる前にtrタグを閉じているため、エラーが発生する可能性があります。私は理解しない

0

シンプルなソリューションあなたのコードがベース(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; 
関連する問題