本文详解 jquery 日历渲染中“仅显示第一行”的典型错误原因，通过重构日期循环逻辑、合理处理首日星期偏移与月末补空，实现完整 4–6 行标准月视图。
本文详解 jquery 日历渲染中“仅显示第一行”的典型错误原因，通过重构日期循环逻辑、合理处理首日星期偏移与月末补空，实现完整 4–6 行标准月视图。
在使用 JavaScript（配合 jQuery）动态生成 HTML 月历的过程中，一个高频陷阱是：日历表格只渲染出第一行（7 个单元格），后续周次完全缺失。根本原因在于原始代码将外层循环限定为 day < 7（即仅遍历一周），却未扩展至覆盖整个月份的全部天数（28–31 天）及对应周次。
要生成符合标准的月历（含表头、首日对齐、月末补空），关键在于三步逻辑闭环：
-
计算当月信息
- 获取当前年份与月份（getFullYear() 和 getMonth()）
- 通过 new Date(year, month, 1).getDay() 得到该月 1 号是星期几（0=Sunday, 6=Saturday）
- 通过 new Date(year, month + 1, 0).getDate() 获取当月总天数（如 new Date(2024, 2, 0) 返回 29）
构建结构化表格
建议语义化优化 HTML：将表头 <th> 放入 <thead>，日历主体放入 <tbody>，便于样式控制与逻辑分离：
<table id="calendar">
<thead>
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
</thead>
<tbody>
<!-- JS 动态插入行 -->
</tbody>
</table>-
正确填充日历单元格
核心修复逻辑如下（使用更简洁、可读性更强的现代写法）：
// 1. 添加前置空白单元格（1号前的空格）
for (let i = 0; i < weekDayOfTheFirst; i++) {
$row.append('<td></td>');
}
let currentWeekDay = weekDayOfTheFirst;
// 2. 遍历每一天（1 → lastDay）
for (let day = 1; day <= lastDay; day++) {
$row.append(`<td>${day}</td>`);
currentWeekDay++;
// 每填满 7 天（即到达周日）或已到最后一天时，提交当前行
if (currentWeekDay % 7 === 0 || day === lastDay) {
// 若本月结束在非周六，则补足本行剩余空白单元格（最多6个）
if (day === lastDay && currentWeekDay % 7 !== 0) {
const trailingCount = 7 - (currentWeekDay % 7);
for (let i = 0; i < trailingCount; i++) {
$row.append('<td></td>');
}
}
$calendarTable.find('tbody').append($row); // ✅ 精准追加到 tbody
$row = $('<tr>'); // 重置新行
}
}⚠️ 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
- ❌ 原始代码中 $calendarTable.append($row) 会把 <tr> 直接插到 <table> 下，可能破坏 <thead> 结构；✅ 应明确追加至 <tbody>。
- ❌ for (var day = 0; day < 7; ...) 仅循环 7 次，无法覆盖整月；✅ 必须以 lastDay 为上限驱动主循环。
- ✅ 使用数组查表替代冗长 if-else 判断月份名（months[currentMonth]），提升可维护性。
- ✅ 将 getLastDayofMonth 改为接收 year 参数，避免硬编码 new Date().getFullYear() 导致跨年失效（如 12 月调用时误取下一年）。
最终效果：无论当月 1 号落在周几、无论该月多少天，均可自动生成 4–6 行完整日历，首尾空白单元格自动对齐，结构清晰、语义规范、易于后续扩展（如添加事件绑定、高亮今日等）。
