使用 Javascript 在循环中生成表行

Question

我不知道如何在循环中的某些条件之后生成行。下面的代码试图制作日历表，但我不明白为什么它只显示最后一行有条件。请帮忙解决

let start = document.querySelector('div');
let table = document.createElement('table');
let row = document.createElement('tr');
let date = new Date(2015,5);

while (date.getMonth() == 5){
  let td = document.createElement('td');
  td.innerHTML= date.getDate();
  row.appendChild(td);

  if ( date.getDay()%6 == 0){
    table.appendChild(row) //want that it add new row after each 7 days
    console.log(table)
    row.innerHTML = '';
  }

  date.setDate( date.getDate() + 1) ;   
}

table.appendChild(row)
start.appendChild(table)

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }

<div class="container"></div>

Answer 1

这应该可以解决问题，

let start = document.querySelector('div');
let table = document.createElement('table');
let row = document.createElement('tr');
let date = new Date(2015,5);

while (date.getMonth() == 5){
  let td = document.createElement('td');
  td.innerHTML= date.getDate();
  row.appendChild(td);

  if ( (date.getDay()%7) == 0){
    table.appendChild(row) //want that it add new row after each 7 days
    row = document.createElement('tr');
  }

  date.setDate( date.getDate() + 1) ;   
}

table.appendChild(row)
start.appendChild(table)

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }

<div class="container"></div>

我刚刚做了两个改动，

• 在第 12 行，修改了 if 条件， if (date.getDay()%6 == 0) => if (date.getDay()%7 == 0) 前者适用于 0（星期日）和 6（星期六），导致行数不正确。后者通过模 7 正确地打破了这一行，因为一周中有 7 天
• 在第 15 行，我替换了， row.innerHTML = ''; => row = document.createElement('tr');
  前者只是改变了已经添加到表中的行的引用，从而有效地删除了行中的单元格。使用后者，您将创建一个新的行对象并向其添加单元格。

Answer 2

问题是每次row.innerHTML = ''; 被执行时，你都会清空你构建的行。
您应该做的是创建一个新行，如下所示：row = document.createElement('tr');
一周有 7 天，所以你应该每 7 天创建一次新行，而不是 6 ( date.getDay()%7 == 0)

修复后的代码如下：

let start = document.querySelector("body > div");
let table = document.createElement('table');
let row = document.createElement('tr');
let date = new Date(2015,5,1);

while (date.getMonth()===5){
  let td = document.createElement('td');
  td.innerHTML= date.getDate();
  row.appendChild(td);        
  if (date.getDay()%7 === 0){
    table.appendChild(row); //want that it add new row after each 7 days
    row = document.createElement('tr');// we create new row istead of cleating the previous one
  }
  date.setDate( date.getDate() + 1);   
}
table.appendChild(row);
start.appendChild(table);

<div class="container"></div>