希望您有美好的一天。
我正在使用纯 JavaScript 编写日历,到目前为止我陷入了困境(并且花费了太多时间),我需要将天数放入 html 表中。
我想要实现的是将天数放入表格中,但是在到达表格末尾(第 7 列)后换行。
下面是当前状态和代码:
<div class="col-md-6 col-md-offset-3 p-b-3">
<div class="calendar">
<h2 id="monthYear"></h2>
<table>
<tr>
<th><h4>PON</h4></th>
<th><h4>WTO</h4></th>
<th><h4>SRO</h4></th>
<th><h4>CZW</h4></th>
<th><h4>PIĄ</h4></th>
<th><h4>SOB</h4></th>
<th><h4>NIE</h4></th>
</tr>
<tr id="calendarRow">
</tr>
</table>
</div>
</div>
和 JavaScript:
var Calendar = {
plMonths: [
'styczeń',
'luty',
'marzec',
'kwiecień',
'maj',
'czerwiec',
'lipiec',
'sierpień',
'wrzesień',
'październik',
'listopad',
'grudzień'
],
currentMonth: function(){
return new Date().getMonth() + 1;
},
currentYear: function(){
return new Date().getFullYear();
},
currentDay: function(){
return new Date().getDay();
},
getMonthDays: function(year, month){
return new Date(year, month, 0).getDate();
},
currentMonthDays: function(){
return this.getMonthDays(this.currentYear(), this.currentMonth());
}
};
function createCalendar(){
var currentMonth = (Calendar.currentMonth()) - 1;
var currentDays = Calendar.currentMonthDays();
var tableRow = jQuery('#calendarRow');
var maxRowLength;
(function translate() {
for (var i = 0; i < 12; i++) {
if (currentMonth === i)
currentMonth = Calendar.plMonths[i];
}
return currentMonth;
})();
jQuery("#monthYear").text(currentMonth + ' ' + Calendar.currentYear());
/********/
for (var y = 1; y < currentDays; y++) {
jQuery(tableRow).append('<td>' + y + '</td>');
}
}
结果是:
我正在处理的结果应该是:
我什至不需要完整的解决方案,但如果有建议或类似的东西,我们将非常感激。
提前感谢您的帮助!
最佳答案
尝试这样。 CalendarRow 应该是类,因为您需要很多它们。您不需要在表中预设行,最好将 id 添加到表本身。
function createCalendar() {
// ...
var table = jQuery(#calendar).find('table')
// ...
for (var row = 1; row <= Math.ceil(currentDays / 7); row++) {
var day = 1
tableRow = jQuery('<tr class="calendarRow"></tr>')
for (var col = 1; col <= 7 && day <= currentDays; col++, day++) {
jQuery(tableRow).append('<td>' + day + '</td>');
}
table.append(tableRow)
}
}
关于javascript - 创建日历 - 限制列数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43409106/