使用循环填充日历表

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循环创建表。但是，当th首先创建时，我无法让它工作。所有的帮助都是非常感谢的！

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

也许我的解决方案是有用的，它可以根据请求使用嵌套的解决方案。这个问题是由第六章Randy Connolly和Ricardo Hoar的Web开发基础内的实验室部门指定的。

​

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提供的替代方法，并同意他的观点；这只是一个糟糕的作业--有着糟糕的指令，在学习曲线上造成了一个巨大的漏洞。虽然这种解决方案在现代web开发中的应用很少，但对于实践来说却是值得敬重的。

更新

下面是一个更简洁的重构，通过嵌套一个条件else消除了上述初始解决方案中的冗余--如果语句在for -循环中检查可分性(当我被除以7时返回0)，通过关闭行有效地创建一个新的表行，当周的天数除以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>");

​

希望这能有所帮助！