使用 Javascript 在循环中生成 table 行

Question

我不知道如何在循环中的某些条件后生成行。下面的代码试图使日历 table，但我不明白为什么它只显示最后一行的条件。请帮助修复它

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

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>

使用 Javascript 在循环中生成 table 行

Generate table rows in the loop with Javascript

javascript

loops

append

createelement