使用JavaScript數組到html表

Question

我有以下數組格式的數據...（示例一），這是一個數組..基於數據，我需要根據自定義條件生成一個html表...說，表頭將是day1,2,3， 4,5,6及以下數組必須基於每個標頭才能根據條件添加行...我已給出了詳細信息以供參考

 var array=   [{"day":1,"summary":"proge1"},
    {"day":1,"summary":"proge2"},
    {"day":1,"summary":"proge3"},
    {"day":2,"summary":"Tues1"},
    {"day":2,"summary":"Tues2"},
    {"day":2,"summary":"Tues3"},
    {"day":3,"summary":"Wed1"},
    {"day":3,"summary":"Wed2"},
    {"day":3,"summary":"Wed3 "},
    {"day":4,"summary":"Thur1"},
    {"day":4,"summary":"Thur2"},
    {"day":5,"summary":"Fri1"},
    {"day":6,"summary":"Sat1"}]

我想基於此數據生成一個html表，使其應顯示如下。.有人可以建議我如何完成此操作。

    <table>
     <tr>
                       <td align="center">Day1</td>
                        <td align="center">Day2</td>
                        <td align="center">Day3</td>
                        <td align="center">Day4</td>
                        <td align="center">Day5</td>
                        <td align="center"> Day6 </td>
        </tr>
     </table>    

輸出：

    ----------------------------------------------
    Day1    |Day2   Day3    Day4    Day5    Day6
   -----------------------------------------------
    proge1  Tue1    Wed1    Thur1   Fri1    Sat1

    proge2  Tue2    Wed2    Thur2       
    proge3  Tue3    Wed3            

我們是否需要為每個td調用函數（天）並通過值生成表格？

Answer 1

因此，您需要具有唯一值的數組：

var  newarray=[];
 array.forEach(function(el){
   for(var depth=0;depth<newarray.length;depth++){
       newarray[pos]=newarray[pos]||[];
       if(!newarray[pos][el.day-1]){//if the day isnt filled, day 1 is at position zero ( thats why -1)
          newarray[pos][el.day-1]=el;
          return;
       }
  }
});

這將創建一個類似結構的表：

newarray=[
   [{day:1 ...},{day:2}]
   [{day:1}]
];

現在您可以循環槽並構建表：

table=newarray.map(function(row){
  var newrow="<tr>";
  newrow+=row.map(function(el){
        return "<td>"+el.summary+"</td>";
  }).join("");
 newrow+="</tr>";
 return newrow;
}).join("");//make string

然后將其附加到您的dom：

 document.body.innerHTML=table;