如何用 JavaScript 正确生成完整月历表格（含空白占位与周循环逻辑）-js教程-PHP中文网

如何用 JavaScript 正确生成完整月历表格（含空白占位与周循环逻辑）

本文详解 jquery 实现月历渲染时“只显示一行”的常见错误根源，重点修复日期循环逻辑缺陷，通过动态计算首日星期、月末天数及跨周换行机制，生成结构完整、语义清晰的 html 表格日历。

本文详解 jquery 实现月历渲染时“只显示一行”的常见错误根源，重点修复日期循环逻辑缺陷，通过动态计算首日星期、月末天数及跨周换行机制，生成结构完整、语义清晰的 html 表格日历。

在使用 JavaScript（配合 jQuery）动态生成月历时，一个高频问题是：日历仅渲染出第一行（即 7 个单元格），后续周次完全缺失。根本原因在于原始代码中 for (var day = 0; day

要正确构建月历，需分三步处理：

确定起始偏移：获取当月 1 日是星期几（getDay() 返回 0–6，0=Sunday），在首行前置对应数量的空；
逐日填充日期：从 day = 1 循环至当月最后一天（由 new Date(year, month + 1, 0).getDate() 精确获取）；

智能换行与补全：每当累计列数达 7 的倍数（即遇到 Sunday 或到达月末），立即追加当前到；若月末未填满本周，则主动补足剩余空。

以下是优化后的核心实现（兼容现代浏览器，逻辑清晰可维护）：

"use strict";

// 月份名称数组（更简洁替代冗长 if-else）
const MONTHS = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

// 工具函数：获取指定年月的最后一天日期
const getLastDayOfMonth = (year, month) => 
  new Date(year, month + 1, 0).getDate();

$(document).ready(function() {
  const now = new Date();
  const currentMonth = now.getMonth();
  const currentYear = now.getFullYear();
  const monthName = MONTHS[currentMonth];

  // 更新标题
  $('#month_year').text(`${monthName} ${currentYear}`);

  // 计算关键参数
  const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay(); // 0=Sun
  const lastDay = getLastDayOfMonth(currentYear, currentMonth);

  const $tableBody = $('#calendar tbody'); // 明确操作 tbody，语义更佳
  let $row = $('<tr>');

  // 步骤1：添加首周前的空白单元格
  for (let i = 0; i ');
  }

  let currentCol = firstDayOfWeek; // 当前列索引（0~6）

  // 步骤2 & 3：填充日期 + 动态换行 + 末尾补全
  for (let day = 1; day ${day}`);
    currentCol++;

    // 判断是否需要结束当前行：
    // - 若已到周六（currentCol % 7 === 0）→ 周末自然换行
    // - 或已是最后一天（day === lastDay）→ 强制换行并补空单元格
    if (currentCol % 7 === 0 || day === lastDay) {
      if (day === lastDay && currentCol % 7 !== 0) {
        // 月末未满一周：补足剩余列（7 - 当前列余数）
        const trailingCount = 7 - (currentCol % 7);
        for (let i = 0; i ');
        }
      }
      $tableBody.append($row);
      $row = $('</tr><tr>'); // 重置新行
      currentCol = 0;  // 列计数归零
    }
  }
});<p>配套 HTML 需增强语义结构，明确分离表头（<thead>）与内容区（</thead></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5980" title="javascript-pro"><img
														src="https://img.php.cn/upload/skill/000/000/081/179074807567238.jpg" alt="javascript-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="overflowclass">javascript-pro</a>
													<p class="overflowclass">专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</tr><tbody>），便于样式控制与无障碍访问：<pre class="brush:php;toolbar:false;">

✅ 关键改进点总结：