使用循环填充日历表

Question

鉴于以下代码段，我需要创建此

我不允许编辑现有代码，我应该通过添加嵌套循环来实现此目的。

var daysOfWeek = newArray("Monday","Tuesday","Wednesday","Thursday","Friday");
daysOfWeek.push("Saturday");
daysOfWeek.unshift("Sunday");
document.write("<table border=1><tr>");
for (var i = 0; i < daysOfWeek.length; i++){
    document.write("<th>"+daysOfWeek[i]+"</th>");
}
document.write("</tr>");

我理解在首先创建行时如何使用for循环创建表。但是，当我们首先创建它时，我无法让它工作。非常感谢任何和所有的帮助！

Answer 1

// Tell to prof:
// Instead of new Array() I'll use the faster []
var daysOfWeek = ["Monday","Tuesday","Wednesday","Thursday","Friday"];

daysOfWeek.push("Saturday");
daysOfWeek.unshift("Sunday");

// Tell to prof:
// Instead of form of eval "document.write" I'll use String concatenation:
var table = "<table border=1><tr>";
for (var i=0; i < daysOfWeek.length; i++){
    table += "<th>"+daysOfWeek[i]+"</th>";
    // NOTE:
    // if inside this loop we're creating the 7 <th>s headings,
    // than we cannot assert another inner loop here
    // to create any other part of the calendar,
    // cause we're inside the scope of the table headings.
    // Here we're still populating the first <tr> row!!
}
table += "</tr>"; // <<< just here we're finally done with the Days headings


// OK, now the homework: add to table rows / and 30 cells 
var days = 30; // How many days we need?
var appendEmptyDays = 7 - (days+7) % 7; // How many empty cells we miss?

table += "<tr>";

// CREATE DAYS (and WEEKS)
for(var i=1; i<=days; i++){
  table += "<td>"+ i +"</td>";
  if(i%7===0) table += "</tr><tr>"; // Add a new week row?
}

// APPEND EMPTY CELLS
for(var i=0; i<appendEmptyDays; i++){
  table += "<td></td>";
}

table += "</tr></table>";

// Done my string concatenation, I'll now use innerHTML
document.body.innerHTML = table;

这不能用于任何真实环境的网站或应用程序 上面的代码没有考虑到1st最终可能是：Wednesday ......

你教授（希望他正在读这篇文章）应该教你如何创建有趣和有用的东西，即：用户表通过循环数据结构，如：“2D”数组，对象文字或JSON数据，而不是浪费时间创建破旧的日历。

Answer 2

也许我的解决方案可能有用;它按照要求接近嵌套解决方案。此问题由Chapter 6 of Fundamentals of Web Development by Randy Connolly & Ricardo Hoar内的实验室部分指定。

var daysOfWeek = new Array("Sunday","Monday","Tuesday","Wednesday", "Thursday", "Friday", "Saturday");

// document.write(daysOfWeek+"<br>");

// daysOfWeek.push("Saturday");
// document.write(daysOfWeek+"<br/>");

// daysOfWeek.unshift("Sunday");
// document.write(daysOfWeek+"<br/>");

document.write("<table border=1><tr>");
for (var i = 0; i < daysOfWeek.length; i++){
  document.write("<th>"+daysOfWeek[i]+"</th>");
}

document.write("</tr>");
for (var i = 1; i < 31; i++){
  if (i % 7 == 1) document.write("<tr>");
  document.write("<td>" + i + "</td>");
  if (i % 7 == 7) document.write("</tr>");
}

我很欣赏@ RokoC.Buljan提供的替代方法并同意他的意见;这只是一个糟糕的任务问题，指令很差，在学习曲线中创造了一个巨大的漏洞。虽然这种解决方案在现代网站开发中几乎没有应用，但为了锻炼它是值得尊重的。

更新

这是一个更清晰的重构，通过嵌套条件 else-if 语句检查可分性来消除上述初始解决方案中的冗余（当i除以7时返回0 ）在for循环中，通过关闭行有效地创建一个新的表行，当一周的天数除以7并返回余数0;否则，或else，循环继续增加表格 - 行 - 单元格的星期几，直到受到for循环定义i <= 30中指定的整数约束（30）的限制。

 var daysOfWeek = new Array("Sunday","Monday","Tuesday","Wednesday", "Thursday", "Friday", "Saturday");

// document.write(daysOfWeek+"<br>");

// daysOfWeek.push("Saturday");
// document.write(daysOfWeek+"<br/>");

// daysOfWeek.unshift("Sunday");
// document.write(daysOfWeek+"<br/>");

document.write("<table border=1><tr>");
for (var i = 0; i < daysOfWeek.length; i++){
document.write("<th>"+daysOfWeek[i]+"</th>");
}
document.write("</tr><tr>");
for (var i = 1; i <= 30; i++) {
  if(i % 7 == 0){
    document.write("<td>"+i+"</td></tr>");
  }
  else{
    document.write("<td>"+i+"</td>");
  } 
};
document.write("</tr></table>");

希望这有帮助！