本文详解jquery实现月度日历时“仅显示第一行”的典型逻辑错误，重点修复循环控制缺陷、日期对齐逻辑及dom追加时机问题，并提供可直接运行的优化代码。

本文详解jquery实现月度日历时“仅显示第一行”的典型逻辑错误，重点修复循环控制缺陷、日期对齐逻辑及dom追加时机问题，并提供可直接运行的优化代码。

在使用JavaScript动态生成HTML日历时，一个高频陷阱是：日历表格（

）仅渲染出第一行（即首周7个单元格），后续周次完全缺失。这并非HTML结构或CSS导致，而是核心算法逻辑存在结构性缺陷——原代码将整个日历生成过程错误地限制在单层7次循环内，混淆了“星期几索引”与“日期计数”的双重维度，导致dayCounter未持续迭代至月末，且行元素未被正确分周创建与追加。

根本问题在于原逻辑试图用一个 for (var day = 0; day

✅ 正确实现的关键三步

1. 分离关注点：先计算首日星期几（weekDayOfTheFirst）并填充前置空白单元格；
2. 主日期循环：用独立 for (let day = 1; day
3. 智能换行判断：当当前列索引 currentWeekDay % 7 === 0（即到达周日）或 day === lastDay（月末）时，立即追加当前行并新建下一行。

以下是修复后的完整、可直接运行的代码（含语义化HTML结构与基础样式）：

<!DOCTYPE html>
<html>
<head>
  <title>Calendar</title>
  <style>
    table { border-collapse: collapse; margin-top: 1rem; }
    th, td { 
      width: 40px; 
      height: 40px; 
      text-align: center; 
      border: 1px solid #ccc; 
      font-family: -apple-system, sans-serif;
    }
    th { background-color: #f5f5f5; font-weight: 600; }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <main>
    <h1><span id="month_year"> </span></h1>
    <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></tbody>
    </table>
  </main>

  <script>
    "use strict";
    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 currentDate = new Date();
      const currentMonth = currentDate.getMonth();
      const currentYear = currentDate.getFullYear();
      const monthName = months[currentMonth];
      $('#month_year').text(`${monthName} ${currentYear}`);

      const weekDayOfTheFirst = new Date(currentYear, currentMonth, 1).getDay(); // 0=Sun, 6=Sat
      const lastDay = getLastDayofMonth(currentYear, currentMonth);

      const $tbody = $('#calendar tbody');
      let $row = $('<tr>');
      let currentWeekDay = weekDayOfTheFirst;

      // Step 1: Add empty cells before the 1st day
      for (let i = 0; i < weekDayOfTheFirst; i++) {
        $row.append('<td></td>');
      }

      // Step 2: Add all days of the month (1 to lastDay)
      for (let day = 1; day <= lastDay; day++) {
        $row.append(`<td>${day}</td>`);
        currentWeekDay++;

        // Step 3: Append row when reaching Sunday (7 columns) OR at month end
        if (currentWeekDay % 7 === 0 || day === lastDay) {
          // Fill trailing empty cells if month ends mid-week
          if (day === lastDay && currentWeekDay % 7 !== 0) {
            const trailingCount = 7 - (currentWeekDay % 7);
            for (let i = 0; i < trailingCount; i++) {
              $row.append('<td></td>');
            }
          }
          $tbody.append($row);
          $row = $('<tr>'); // reset for next week
        }
      }
    });
  </script>
</body>
</html>

⚠️ 注意事项与最佳实践

• 语义化结构优先：将表头（

）与日历主体（）明确分离，既提升可访问性，也避免jQuery误操作嵌套；

避免魔数：用 const weeks = Math.ceil((weekDayOfTheFirst + lastDay) / 7) 可预估总行数，但动态构建更健壮；

日期对象注意：getDay() 返回 0（星期日）到 6（星期六），而 getMonth() 是 0–11，务必统一理解；

性能提示：对于大量日历渲染（如年视图），建议使用文档片段（DocumentFragment）批量插入，而非多次append()；

扩展性建议：后续添加事件（如点击某日）、高亮今日、支持跨月切换，均应基于此清晰的行列生成逻辑延伸。

通过重构循环职责、显式管理行状态与精准触发DOM插入，即可彻底解决“日历只显示一行”的问题。核心不是技巧，而是对“周循环”与“月循环”两个正交维度的清醒认知。

立即学习“Java免费学习笔记（深入）”；