Question

请帮助我使用表格制作简单的月历。

这是演示。

www.jsfiddle.net/pzdw0s2n/1/

Answer 1

Here是您的JS生成的日历。

var months = new Date();
var days = new Date(months.getFullYear(),months.getMonth()+1, 0).getDate();
var table = document.createElement('table');
var y = 1;
var times = 1;
for(i=7; i<days; i+=5){
    var tr = document.createElement('tr');
  for(y; y<=(7)*times; y++){
    if(y<=31){
    var td = document.createElement('td');
    $(td).text(y);
    $(tr).append(td);
    }
  }
  times++;
    $(table).append(tr);
}
$('body').append(table);

该代码获取当前月份并计算其中的天数。然后使用一些for循环将它们写入表中。

Answer 2

document.addEventListener("DOMContentLoaded", function() {

    daysOfTheWeek = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];

    var date = new Date();

    var toDay = date.getDay();

    var numDays = daysOfTheWeek.length;

    th = '';

    for(var i=0; i<numDays; i++) {
        
        th += '<th>' + ( daysOfTheWeek[(i+toDay) % numDays] ) + '</th>';
    }

    document.getElementById('thead').innerHTML = th;
});

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        
        <table class="calendar" cellpadding="0" cellspacing="0">
            <thead id="thead">
            </thead>
            <tbody>
                <tr>
                    <td><a href="#">1</a></td>
                    <td><a href="#">2</a></td>
                    <td><a href="#">3</a></td>
                    <td><a href="#">4</a></td>
                    <td><a href="#">5</a></td>
                    <td><a href="#">6</a></td>
                    <td><a href="#">7</a></td>
                </tr>
                <tr>
                    <td><a href="#">8</a></td>
                    <td><a href="#">9</a></td>
                    <td><a href="#">10</a></td>
                    <td><a href="#">11</a></td>
                    <td><a href="#">12</a></td>
                    <td><a href="#">13</a></td>
                    <td><a href="#">14</a></td>
                </tr>
                <tr>
                    <td><a href="#">15</a></td>
                    <td><a href="#">16</a></td>
                    <td><a href="#">17</a></td>
                    <td><a href="#">18</a></td>
                    <td><a href="#">19</a></td>
                    <td><a href="#">20</a></td>
                    <td><a href="#">21</a></td>
                </tr>
                <tr>
                    <td><a href="#">22</a></td>
                    <td><a href="#">23</a></td>
                    <td><a href="#">24</a></td>
                    <td><a href="#">25</a></td>
                    <td><a href="#">26</a></td>
                    <td><a href="#">27</a></td>
                    <td><a href="#">28</a></td>
                </tr>
                <tr>
                    <td><a href="#">29</a></td>
                    <td><a href="#">30</a></td>
                    <td><a href="#" class="disabled">1</a></td>
                    <td><a href="#" class="disabled">2</a></td>
                    <td><a href="#" class="disabled">3</a></td>
                    <td><a href="#" class="disabled">4</a></td>
                    <td><a href="#" class="disabled">5</a></td>
                </tr>
                <tr>
                    <td><a href="#" class="disabled">6</a></td>
                    <td><a href="#" class="disabled">7</a></td>
                    <td><a href="#" class="disabled">8</a></td>
                    <td><a href="#" class="disabled">9</a></td>
                    <td><a href="#" class="disabled">10</a></td>
                    <td><a href="#" class="disabled">11</a></td>
                    <td><a href="#" class="disabled">12</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

表thead中的jQuery日历工作日

2 个答案: