2017-01-26 7 views
-1

以下のような配列形式のデータがあります。(サンプル1)これは配列です。データに基づいて、カスタム条件でhtmlテーブルを生成する必要があります。ヘッダはday1,2,3,4,5,6であり、アレイの下の条件に基づいて行を追加するために、各ヘッダーに基づいてする必要があります...私は私が望む基準javascriptを使用したhtmlテーブルへの配列

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

の詳細を与えていますそれは、誰かがこれを達成するためにどのように私を提案してください。..

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

をbelow..canとして表示するような、このデータに基づいてHTMLテーブルを生成します出力:

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

    proge2 Tue2 Wed2 Thur2  
    proge3 Tue3 Wed3    

tdごとに関数(日)を呼び出し、値によってテーブルを生成する必要がありますか?

+1

あなたがこれまでに試したことを投稿することをお勧めします。 –

答えて

0

ですから、一意の値を持つ配列を持っている必要があります:

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; 
+0

こんにちはJonas w ...申し訳ありませんが、私は配列を渡しています。新しい配列を取得するには....より具体的にしてください...ごめんなさいsomethign here – TTT

+0

array.forEach ...元の配列をループし、新しい配列newarrayを作成します。私はhtmlの文字列を構築するよりも、その名前はテーブルです。 –

関連する問題