Javascript create table with for loop and array

Я пытаюсь создать таблицу на основе массивов и циклов. Я попытался изо всех сил решить это самостоятельно. Без результата. В цикле for вы можете видеть, что я попытался, но без результата. Я хочу, чтобы таблица генерировать только из массивов и для цикла и выглядеть следующим образом:Javascript create table with for loop and array

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

источник

2017-01-31 Olaf lol

Обратите внимание, что TR для строк, так что вы создаете строки, но нет клеток 'TD' – Ibu

Вы абсолютно привержен пути вы организованной ваши данные? Потому что кажется, что вам может понадобиться переупорядочить ваши массивы, возможно, в объекты.

источник

2017-01-31 00:30:43 MrFarberToYou

Я не понимаю, вы можете показать? спасибо –

Моя рекомендация состояла бы в том, чтобы сформировать данные больше в соответствии с тем, что вы хотите видеть. Например, первым индексом массива будет массив всех головок таблицы, и каждый из них после этого будет строкой. – MrFarberToYou

Прежде всего, ваш цикл for не использует измерительный массив или массив year - вы просто добавляете элементы из массива деревьев. Второй момент - вы делаете строку для «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>"

, который не то, что вы хотите. Кроме того, во второй строке цикла вы закрываете тег tr перед закрытием th тега, что также может вызвать ошибки.

источник

2017-01-31 00:54:22

простого решения коды на основе (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;

источник

2017-01-31 01:11:57 gilchris

ответ

Смежные вопросы