javascript - 使用 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');
  前者只是改变已添加到表中的行的引用，从而有效地删除该行中的单元格。使用后者，您将创建一个新的行对象并向其中添加单元格。