2017-01-09 7 views
0

各列の各日付の値を持つmoment.jsオブジェクトを含む表を埋めることを試みています。配列は、私はこのようなルックスを持つテーブルを埋めるためにしようとしている:テーブルの列を多次元配列のデータで埋めてください。javascript

[['8th Jan 11AM', '8th Jan 12AM'],['9th Jan 11AM', '9th Jan 12AM'],['10th Jan 11AM', '10th Jan 12AM']] 

私はようにその配列を作成しています:

for (var i = 0; i < 7; i++) { 
    thisMoment = moment().day(i); 

    var dayDateStamps = []; 
    for (var j = 0; j < 12; j++) { 
     dayDateStamps.push(thisMoment.startOf('day').add(j + 6, 'hours').format('lll')); 
    } 
    dateStamps.push(dayDateStamps); 

} 

私はこれをやっているテーブルを生成するには:

を しかし
function bodyFromDateStamps(dateStamps) { 
    var tbody = document.getElementsByTagName('tbody')[0]; 
    for(var i = 0; i < countMultiArray(dateStamps); i++) { 
     if (i % 7 == 0) { 
      row = tbody.insertRow(tbody.rows.length); 
     } 
     row.insertCell(i % 7).innerHTML = dateStamps[i % 7][i]; 
    } 
} 

function countMultiArray(array) { 
    var iter = 0 
    for (var i = 0; i < array.length; i++) { 
     for (var j = 0; j < array[i].length; j++) { 
      iter += 1 
     } 
    } 
    return iter; 
} 

、現在、私はこれを取得しています: Table Cells Undefined

私が手適切な量​​の細胞(84)しかし、内容は、「時間」ループの1回の反復後に停止している。私はここで間違ってしまった場所で動かすことはできません。

この問題を解決するにはどうすればよいですか?この問題を解決するには、より良い方法がありますか? ご迷惑をおかけして申し訳ございません。

答えて

1

問題は、テーブルを生成しています。

あなたは0から83まで反復処理を行い、それによって内部配列にアクセスしようとしていますi。あなたはモジュラスを使用して、正しく最初のアレイにアクセスしているが、第二配列インデックスは、0-6値のインデックスにバインドする必要があり、そうする本:

row.insertCell(i % 7).innerHTML = dateStamps[i % 7][Math.floor(i/12)]; 

Math.floor(i/12)正しく0で2番目のインデックスを見つけるでしょう - 83繰り返し。

BTW:countMultiArrayは、7 * 12に置き換えることができます。値を知っているので、その機能は必要ありません。