javascript - 使用jquery垂直打印日历

Question

我试图像这样垂直打印日历

1  8  15 22 29
2  9  16 23 30
3  10 17 24 31
4  11 18 25 
5  12 19 26
6  13 20 27
7  14 21 28

我尝试了下面的代码

var x = 1;
var $tbodyTr = $('<tr>').appendTo($tbody);
for(var i = 1; i <= 31; i++){
   if(x == 7) {
       x = 1;
       $tbodyTr = $('<tr>').appendTo($tbody);
   } 
   $tbodyTd = $('<td>',{html: i}).appendTo($tbodyTr);
   x++;
}

但它是水平打印的。

var $table = $('<table>',{'class': 'table-calendar table table-hover text-center table-calendar'});
var $tbody = $('<tbody>').appendTo($table);
var x = 1;
var $tbodyTr = $('<tr>').appendTo($tbody);
for(var i = 1; i <= 31; i++){

	if(x == 7) {
		x = 1;
		$tbodyTr = $('<tr>').appendTo($tbody);
	} 
	$tbodyTd = $('<td>',{html: i}).appendTo($tbodyTr);
	x++;
} 
$('.table-responsive').html($table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">

</div>

寻求帮助，想要垂直输出。

Answer 1

要解决此问题，您可以使用列值的序号位置来构建列值。

由于这是针对日历的，因此您可以断言 6*6 单元格(或示例中的 7*5)网格足以容纳所有 31 天，无论起始位置在哪里。因此，您可以使用两个循环并根据当前行/列计算天数，如下所示

var $table = $('<table>', {
  'class': 'table-calendar table table-hover text-center table-calendar'
}).appendTo('.table-responsive');
var $tbody = $('<tbody>').appendTo($table);
var rowCount = 7, colCount = 5;

var html = '';
for (var row = 0; row < rowCount; row++) {
  html += '<tr>';
  for (var col = 0; col < colCount; col++) {
    var day = (row + 1) + (col * rowCount);
    if (day < 32) 
      html += `<td>${day}</td>`;
  } 
  html += '</tr>';
}
$tbody.append(html);

td { padding: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive"></div>

然后可以轻松调整此逻辑，以根据星期几以及给定月份的天数移动起始位置。