在日历行/列中添加天数

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;