如何用jQuery实现日历垂直排版？当前代码仅支持横向显示

AI 小北

2026-5-14

实现垂直排版的日历（列优先填充）

看起来你想要的是列优先的日历布局：每一列依次包含1、8、15...，2、9、16...这样的日期序列，而不是原有代码生成的行优先（每行1-7、8-14...）横向排版。我们只需要调整填充逻辑为按列优先即可实现需求。

实现思路

日历固定7列（对应一周7天），计算所需行数：Math.ceil(31/7) = 5行（31天最多需要5行容纳）。
先创建好5行，每行包含7个空的<td>单元格，确保结构完整。
按列遍历填充：先填满第一列的所有行，再依次处理第二列、第三列...直到所有日期都放入对应位置。
列与行的日期计算：对于第c列（从0到6）和第r行（从0到4），对应的日期为 c + 1 + r*7，如果数字超过31则停止当前列的填充。

完整代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive"></div>
<script>
$(function() {
  var $table = $('<table>',{'class': 'table-calendar table table-hover text-center table-calendar'});
  var $tbody = $('<tbody>').appendTo($table);
  var totalColumns = 7; // 一周7天
  var totalRows = Math.ceil(31 / totalColumns); // 计算需要的行数

  // 先创建所有行和空单元格
  for(var r = 0; r < totalRows; r++) {
    var $tr = $('<tr>').appendTo($tbody);
    for(var c = 0; c < totalColumns; c++) {
      $('<td>').appendTo($tr);
    }
  }

  // 按列优先填充日期
  for(var c = 0; c < totalColumns; c++) {
    for(var r = 0; r < totalRows; r++) {
      var dateNum = c + 1 + r * 7;
      if(dateNum > 31) break; // 超过31天就停止当前列的填充
      $tbody.find('tr').eq(r).find('td').eq(c).text(dateNum);
    }
  }

  $('.table-responsive').html($table);
});
</script>