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;

在日历行/列中添加天数

1 个答案: