在日曆行/列中添加天數

Question

我用普通的javascript構建了一個網絡日曆，我被卡在顯示<td></td>中的數字，並在7列之後停止它們。

到目前爲止，我擁有所有我需要的數據，但是我無法在HTML中顯示它們。 我的問題是：

• 我一直只創建一個<tr></tr>，而不是6（月最大周）
• 我顯示我的<tr><td></td></tr>，而不是內部後的數字。

我認爲這主要是如何將元素插入到HTML中。任何建議真的很感激。

代碼：

window.wca = {}; 

(function() { 
    wca.today = new Date(); 
    createCalendar(); 

function createCalendar(){ 
    wca.currentYear = wca.today.getFullYear(); 
    wca.currentMonth = wca.today.getMonth(); //month in number 
    wca.currentDayOfWeek = wca.today.getDay(); 
    wca.firstDay = new Date(wca.currentYear, wca.currentMonth, 1); //first day of current month 
    wca.firstDayOfWeek = daysLabel[wca.firstDay.getDay()]; // first dayOfTheWeek of current month 
    wca.showMonth = monthNamesArray[wca.currentMonth]; //current month string 
    wca.showWeekDay = daysLabel[wca.currentDayOfWeek]; //current day of the week 
    wca.totDayInMonth = daysPerMonth[wca.currentMonth]; //how many days are in the current month 

    //Leap years 
    if (wca.currentMonth == 1) { // February 
     if((wca.currentYear % 4 == 0 && wca.currentYear % 100 != 0) || wca.currentYear % 400 == 0){ 
      wca.totDayInMonth = 29; 
     } 
    } 

    var Htmltable = document.getElementById('table'); 
    var year = document.getElementById('year'); 
    var month = document.getElementById('month'); 
    var daysOfWeek = document.getElementById('days-of-week'); 


    year.innerHTML = '<td>'+ wca.currentYear +'</td>'; 
    month.innerHTML = '<td>'+ wca.showMonth +'</td>'; 
    for(i = 0; i < daysLabel.length; i++) 
     daysOfWeek.innerHTML = daysOfWeek.innerHTML + '<td>'+ daysLabel[i] +'</td>'; 

    Htmltable.innerHTML += '<tr id="days-row">'; 
    var daysRow = document.getElementById('days-row'); 

    var day = 1; 
    for(i = 1; i <= 6; i++){ //weeks in a month (rows) 
     for(j = 0; j <= 6; j++){ //7 days in a week (coloumns) 
      daysRow.innerHTML += '<td>'; 
      if(day <= wca.totDayInMonth){ 
       daysRow.innerHTML += day; 
       day++; 
      } 
      daysRow.innerHTML += '</td>'; 
     } 
     //if day > totDayMonth - stop making line 
    } 
    Htmltable.innerHTML += '</tr>'; 

} 
})(); 

HTML：

<table> 
    <tbody id="table"> 
     <tr id="year"></tr> 
     <tr id="month"></tr> 
     <tr id="days-of-week"></tr> 
    </tbody> 
</table> 

Answer 1

這真的很難猜測有什麼問題，有沒有更完整的例子。 可能是原因的一個原因是空單元正在崩潰。此外，我已經感動的innerHTML的HTML變量，附加只是一次..

用於補償試試這個代碼被添加非打破空間空單元：

var Htmltable = document.getElementById('table'); 
var day = 1; 
var html = ''; 
    for(i = 1; i <= 6; i++){ //weeks in a month (rows) 
     html += '<tr>'; 
     for(j = 0; j <= 6; j++){ //7 days in a week (coloumns) 
      html += '<td>'; 
      if(day <= wca.totDayInMonth){ 
       html += day; 
       day++; 
      } else { 
       html += "&nbsp;"; 
      } 
      html += '</td>'; 
     } 
     //if day > totDayMonth - stop making line 
     html += '</tr>'; 
    } 
    Htmltable.innerHTML += html;