javascript - 创建日历 - 限制列数

Question

希望您有美好的一天。

我正在使用纯 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>');
    }

}

结果是:

我正在处理的结果应该是:

我什至不需要完整的解决方案，但如果有建议或类似的东西，我们将非常感激。

提前感谢您的帮助!

Answer 1

尝试这样。 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)
    }
}