如何用JavaScript生成对应月份日期的横向数字并按周换行

原代码的核心问题在于每次循环都创建新的<tr>标签，导致每个日期单独占一行，同时换行逻辑混乱，没有正确控制表格行的开闭。以下是修复后的实现：

修复后的代码 #

HTML（无需修改） #

<table>
  <thead id="week"></thead>
  <tbody id="days"></tbody>
</table>

JavaScript #

const getDay = document.getElementById('days');
const getWeek = document.getElementById('week');
// 设置表头（H、K等是匈牙利语的星期缩写，保留原设定）
getWeek.innerHTML = '<tr><th>H</th><th>K</th><th>Sz</th><th>Cs</th><th>P</th><th>Sz</th><th>V</th></tr>';

let currentRow = document.createElement('tr'); // 创建当前行元素
getDay.appendChild(currentRow); // 先把第一行加入tbody

for (let i = 1; i <= 31; i++) {
  // 创建日期单元格
  const dayCell = document.createElement('td');
  dayCell.id = `${i}day`;
  dayCell.className = 'days';
  dayCell.textContent = i;
  // 绑定点击事件（推荐用addEventListener代替inline onclick，更易维护）
  dayCell.addEventListener('click', () => window[`open${i}`]?.());
  
  currentRow.appendChild(dayCell); // 将单元格加入当前行

  // 每7个日期换行，且不是最后一个日期时才创建新行
  if (i % 7 === 0 && i !== 31) {
    currentRow = document.createElement('tr');
    getDay.appendChild(currentRow);
  }
}

关键改进点 #

• 避免重复操作innerHTML：用createElement和appendChild操作DOM，性能更好，也更易维护，不会出现字符串拼接的语法错误。
• 正确的行控制逻辑：通过i % 7 === 0判断是否要换行，每7个日期就创建新的表格行，保证一行显示一周7天。
• 优化事件绑定：用addEventListener替代内嵌的onclick属性，避免字符串拼接带来的潜在问题，同时支持可选链判断window[open${i}]?.()防止方法不存在时报错。

如果需要适配不同月份的天数（比如2月28/29天、4月30天等），可以把循环上限改成动态获取的月份天数，比如：

// 获取当前月份的天数示例（以2024年5月为例）
const date = new Date(2024, 4, 0); // 月份是0-based，4代表5月，0代表上月最后一天
const daysInMonth = date.getDate();
// 然后循环改成for (let i = 1; i <= daysInMonth; i++)

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