使用JavaScript innerHTML创建日历表格时行失效，日期堆叠成单列

嘿，我仔细捋了你的问题和代码逻辑，核心问题出在表格行（<tr>）的生成逻辑缺失上！你现在的代码只在循环里生成了日期单元格<td>，但没按每周7天的规则正确创建和闭合<tr>——表格里的<tr>是用来定义行的，所有<td>塞进同一个<tr>里，自然就全部堆成一列了。

下面是适配你现有代码结构的修复方案：

// 获取当前月份基础数据
var date = new Date();
var month = date.getMonth();
var monthName = getMonthText(month); // 假设你已实现该月份转文本函数
var daysInMonth = new Date(date.getFullYear(), month + 1, 0).getDate();
var firstDayOfMonth = new Date(date.getFullYear(), month, 1).getDay(); // 当月第一天是周几（0=周日）

// 开始构建日历HTML字符串
let calendarHTML = '<table><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead><tbody>';
let currentDate = 1;

// 第一步：创建第一行，填充当月第一天之前的空白单元格
calendarHTML += '<tr>';
for (let i = 0; i < firstDayOfMonth; i++) {
    calendarHTML += '<td></td>';
}

// 第二步：循环填充当月所有日期
while (currentDate <= daysInMonth) {
    calendarHTML += `<td>${currentDate}</td>`;
    
    // 关键：每满7个单元格（含前面空白）就换行
    if ((firstDayOfMonth + currentDate) % 7 === 0) {
        calendarHTML += '</tr><tr>';
    }
    currentDate++;
}

// 第三步：填充最后一行的剩余空白单元格，保证每行都是7个单元格
let remainingEmptyCells = 7 - ((firstDayOfMonth + daysInMonth) % 7);
if (remainingEmptyCells !== 7) { // 避免整行情况多添加空行
    for (let i = 0; i < remainingEmptyCells; i++) {
        calendarHTML += '<td></td>';
    }
}

// 闭合最后一行和表格标签
calendarHTML += '</tr></tbody></table>';

// 将构建好的HTML插入页面容器
document.getElementById('calendar-container').innerHTML = calendarHTML;

修复逻辑说明 #

1. 明确行拆分规则：通过(firstDayOfMonth + currentDate) % 7 === 0判断，确保每满7个单元格就换行，贴合日历每周7天的布局逻辑。
2. 首尾空白填充：处理了当月第一天不是周日、最后一天不是周六的边界情况，保证每行都是完整的7个单元格，避免表格布局错乱。
3. 标签正确闭合：所有<tr>和<td>都严格闭合，避免innerHTML渲染时出现标签解析异常。

把这段逻辑替换你原来生成日历表格的代码部分，就能解决日期堆叠的问题啦！

内容的提问来源于stack exchange，提问作者deviation56