本文详解 jquery 实现月度日历时“只显示第一行”的典型逻辑缺陷，指出核心问题在于循环未覆盖整个月份天数、行追加时机错误，并提供结构清晰、可复用的修复方案，含优化代码、html 结构建议与关键注意事项。

本文详解 jquery 实现月度日历时“只显示第一行”的典型逻辑缺陷，指出核心问题在于循环未覆盖整个月份天数、行追加时机错误，并提供结构清晰、可复用的修复方案，含优化代码、html 结构建议与关键注意事项。

在使用 JavaScript（配合 jQuery）动态生成 HTML 表格形式的日历时，一个常见却隐蔽的错误是：日历只渲染出第一周（即首行 7 个单元格），后续行完全缺失。这并非 DOM 插入失败或 CSS 隐藏所致，而是循环控制逻辑与表格行（）生命周期管理不当导致的——原始代码中 for (var day = 0; day

要正确构建日历，需分三步系统性处理：

1. 计算前置空单元格数：获取当月 1 日是星期几（getDay() 返回 0–6，0=Sunday），在首行前补足对应数量的空 ；
2. 逐日填充日期单元格：从 1 号开始，依次插入 1、2 … 直至月末最后一天；
3. 智能截断并闭合行：每当累计单元格数达到 7 的倍数（即本周结束），或已填完最后一天时，将当前 追加到 ；若月末未满 7 天，还需补足尾部空单元格以保持表格对齐。

   以下是修复后的精简、健壮且符合现代实践的实现：

   "use strict";
   
   // 月份名称映射（替代冗长 if-else）
   const MONTH_NAMES = [
     "January", "February", "March", "April", "May", "June",
     "July", "August", "September", "October", "November", "December"
   ];
   
   // 获取指定年月的最后一天日期（返回数字，如 31）
   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 = MONTH_NAMES[currentMonth];
   
     // 更新标题
     $('#month_year').text(`${monthName} ${currentYear}`);
   
     // 计算关键参数
     const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay(); // 0=Sun
     const lastDay = getLastDayOfMonth(currentYear, currentMonth);
   
     const $calendarTable = $('#calendar');
     let $row = $('<tr>');
     let cellCount = 0; // 当前行已添加单元格数
   
     // 步骤1：添加前置空单元格（1号前的空白占位）
     for (let i = 0; i ');
       cellCount++;
     }
   
     // 步骤2 & 3：填充日期 + 动态换行
     for (let day = 1; day ${day}`);
       cellCount++;
   
       // 满7列 或 已到最后一天 → 关闭当前行
       if (cellCount % 7 === 0 || day === lastDay) {
         // 若月末未满一行，补足空单元格（保持7列对齐）
         if (day === lastDay && cellCount % 7 !== 0) {
           const trailing = 7 - (cellCount % 7);
           for (let i = 0; i ');
           }
         }
         $calendarTable.append($row);
         $row = $('</tr><tr>'); // 重置为新行
         cellCount = 0;
       }
     }
   });<p>配套的 HTML 结构建议采用语义化 <thead>/</thead></p>
   </tr><tbody> 分离，提升可维护性与可访问性：<pre class="brush:php;toolbar:false;">

   Sun	Mon	Tue	Wed	Thu	Fri	Sat

   ✅ 关键注意事项：

   • 勿在 根节点直接追加 ：应明确指定 #calendar tbody 为目标容器（或如示例中确保 存在），避免浏览器自动纠错导致布局异常；
     避免全局变量污染：使用 const/let 替代 var，限定作用域，防止意外覆盖；
     月份索引一致性：Date.getMonth() 返回 0–11，务必与 MONTH_NAMES 数组下标对齐；
     星期起始日约定：本方案以 Sunday 为第 0 列（符合 getDay() 默认行为），若需 Monday 起始，可调整前置空单元格计算逻辑（如 (firstDayOfWeek + 6) % 7）；
     样式补充建议：为
     添加 text-align: center; width: 14%; 可使各列均匀分布。

     该方案不仅彻底解决“单行显示”问题，更具备良好的扩展性——后续添加日期高亮、事件绑定、跨月导航等功能，均可在此结构上平滑演进。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南