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