尝试使用循环的月份中的天数将单元格和行添加到表中需要帮助

Need help trying to add cells and rows to a table using the days in month for loop

本文关键字：帮助 添加 单元格 循环      更新时间：2023-09-26

试图创建一个日历，记录天数并将其添加到表中的tr中。我已经创建了我所有的var，但我很难处理循环和日历的开始和结束。请帮帮我，我是新手。

"use strict";
var $ = function (id) { return document.getElementById(id); };
var d = new Date();
var year = d.getFullYear();
var monthName = ["January", "February", "March", "April","May","June", "July", "August", "September", "October", "November", "December"];
var month = d.getMonth();
var date = monthName[month] + "" + 1 + "" + year;
var tmp = new Date(date).toDateString();
var firstDay = tmp.substring(0, 3);
var dayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var dayNumber = dayName.indexOf(firstDay);
var days = new Date(year, month+1, 0).getDate();
var getMonthText = function() {
    var monthText = monthName[d.getMonth()];
    var message = monthText + " " + year;
    document.getElementById("month_year").innerHTML = message;
};

var displayCalendar = function(dayNumber, days) {
    var table = document.getElementById("calendar");
    var row = document.createElement("tr");
for (var i = 1; i < 6; i++) {
        row = table.insertRow(-1);
        for (var j = 0; j < days; j++) {
            var cell = row.insertCell(-1);
            cell.innerHTML = days[i];
        }
    }

    table.innerHTML = "";
    table.appendChild(row);

};
window.onload = function () {
 getMonthText();
 displayCalendar(dayNumber, days);
};

<!DOCTYPE html>
<html>
<head>
    <title>Calendar</title>
</head>
<body>
    <main>
        <h1 id="month_year">&nbsp;</h1>

        <table id="calendar">
            <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
        </table>
    </main>
</body>
</html>
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 360px;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 {
    color: blue;
    margin-bottom: .25em;
}
table {
    border-collapse: collapse;
    border: 1px solid black;
}
td {
    width: 3em;
    height: 3em;
    vertical-align: top;
    padding: 0.5 0 0 0.5;
    border: 1px solid black;
}

我对您的代码做了一些更改。您试图访问一个整数变量的位置，因此导致了未定义的值。此外，我已经实现了工作日的逻辑，在第一周插入空单元格。

当一周中的天数超过6时，它会重置，将行追加到表中，然后创建新行。

"use strict";
var $ = function (id) { return document.getElementById(id); };
var d = new Date();
var year = d.getFullYear();
var monthName = ["January", "February", "March", "April","May","June", "July", "August", "September", "October", "November", "December"];
var month = d.getMonth();
var date = monthName[month] + "" + 1 + "" + year;
var tmp = new Date(date).toDateString();
var firstDay = tmp.substring(0, 3);
var dayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var dayNumber = dayName.indexOf(firstDay);
var days = new Date(year, month+1, 0).getDate();
var getMonthText = function() {
    var monthText = monthName[d.getMonth()];
    var message = monthText + " " + year;
    document.getElementById("month_year").innerHTML = message;
};
var displayCalendar = function(dayNumber, days) {
  var table = document.getElementById("calendar");
  var row = document.createElement("tr");
  var weekdays = 0;
  var firstDate = new Date(year, month, 1);
  var weekdays = firstDate.getDay();
  var current_row = table.insertRow(-1);
  for(var i=0; i < weekdays; i++) {
    current_row.insertCell(-1);
  }
  table.appendChild(current_row);
  weekdays--;
  for(var ds = 1; ds <= days; ds++) {
    if(weekdays == 6){
      weekdays = 0;
      table.appendChild(current_row);
      current_row = table.insertRow(-1);
    } else {
      weekdays++;
    }
    var cell = current_row.insertCell(-1);
    cell.innerHTML = ds;
  }
};
 getMonthText();
 displayCalendar(dayNumber, days);
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 360px;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 {
    color: blue;
    margin-bottom: .25em;
}
table {
    border-collapse: collapse;
    border: 1px solid black;
}
td {
    width: 3em;
    height: 3em;
    vertical-align: top;
    padding: 0.5 0 0 0.5;
    border: 1px solid black;
}
    <main>
        <h1 id="month_year">&nbsp;</h1>
        <table id="calendar">
            <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
        </table>
    </main>

相关文章：