无法使用 innerHTML 让表格行在 Javascript 中工作答案

【问题标题】：Cannot get table rows to work in Javascript using innerHTML无法使用 innerHTML 让表格行在 Javascript 中工作
【发布时间】：2018-05-08 13:37:29
【问题描述】：

我必须使用 Javascript 为学校项目创建日历应用程序。该表必须使用 innerHTML 属性创建。我设法让一切正常工作，但由于某种原因无法弄清楚为什么没有创建日历的行 - 所有的日子都堆积成一长列。我已经在适当的地方插入了标签（我认为）。

完整的 JSFiddle 在这里：https://jsfiddle.net/68294kdh/

var date = new Date();
var month = date.getMonth();
var monthName = getMonthText(month);
var year = date.getFullYear();
var firstDay = new Date(year, month, 1);
var lastDay = getLastDayofMonth(month);

$('month_year').innerHTML = monthName + ' ' + year;

var day = 0;

$('calendar').innerHTML += "<tr>";
for(i=0; i<7; i++) {  
    if(i >= firstDay.getDay()) {
        day++;
        $('calendar').innerHTML += '<td>' + day + '</td>';
    } else {
        $('calendar').innerHTML += '<td>' + ' ' + '</td>';
    }
}
$('calendar').innerHTML += "</tr>";

for(i=0; i<4; i++) {
    $('calendar').innerHTML += '<tr>';
    for(j=0; j<7; j++) {
        if(day < lastDay) {
            day++;
            $('calendar').innerHTML += '<td>' + day + '</td>';
        } else {
            $('calendar').innerHTML += '<td>' + ' ' + '</td>';
        }
    }
    $('calendar').innerHTML += '</tr>';
}

【问题讨论】：

我注意到您将变量定义为“$”。你不应该那样做。你这样做的目的是什么？
那是jquery，它是$ 很正常？

标签： javascript html html-table innerhtml

【解决方案1】：

您需要同时为表格添加所有 HTML。试试这样的：

window.onload = function () {

    var date = new Date();
    var month = date.getMonth();
    var monthName = getMonthText(month);
    var year = date.getFullYear();
    var firstDay = new Date(year, month, 1);
    var lastDay = getLastDayofMonth(month);

    $('month_year').innerHTML = monthName + ' ' + year;

    var day = 0;
    var htmlString = "";
    var htmlString += '<tr>';
    for(i=0; i<7; i++) {  
        if(i >= firstDay.getDay()) {
            day++;
            htmlString += '<td>' + day + '</td>';
        } else {
            htmlString += '<td>' + ' ' + '</td>';
        }
    }
    htmlString += '</tr>';

    for(i=0; i<4; i++) {
        htmlString += '<tr>';
        for(j=0; j<7; j++) {
            if(day < lastDay) {
                day++;
                htmlString += '<td>' + day + '</td>';
            } else {
               htmlString += '<td>' + ' ' + '</td>';
            }
        }
       htmlString += '</tr>';
    }
    $('calendar').innerHTML+=htmlString;
};

【讨论】：

这行得通 - 只需要修复定义了两次的 htmlString 变量。谢谢！

【解决方案2】：

这是非常低效的。试试这个：

var body = []
var htmlString = "";
var htmlString += '<tr>';
for (i = 0; i < 7; i++) {
  if (i >= firstDay.getDay()) {
    day++;
    htmlString += '<td>' + day + '</td>';
  } else {
    htmlString += '<td>' + ' ' + '</td>';
  }
}
htmlString += '</tr>';
body.push(htmlString)
htmlString = '<tr>'
for (i = 0; i < 4; i++) {
  htmlString += '<tr>';
  for (j = 0; j < 7; j++) {
    if (day < lastDay) {
      day++;
      htmlString += '<td>' + day + '</td>';
    } else {
      htmlString += '<td>' + ' ' + '</td>';
    }
  }
  htmlString += '</tr>';
  body.push(htmlString)

$('calendar').innerHTML = '<tbody>' + body.join('') + '</tbody>'

【讨论】：