表thead中的jQuery日历工作日

Question

Please help me to make simple month calendar using table. 请帮助我使用表格制作简单的月历。

here's the demo. 这是演示。

www.jsfiddle.net/pzdw0s2n/1/

Answer 1

Here is your JS generated calendar. 这是您的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);

The Code gets current months and calculates how many days in it. 该规范获取当前月份并计算其中的天数。 Then with some for loops it is writing them into a 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 个解决方案

解决方案1
1 2018-08-12 11:19:47

解决方案2
1 已采纳 2018-08-12 11:25:47

表thead中的jQuery日历工作日

问题描述

2 个解决方案

解决方案1 1 2018-08-12 11:19:47

解决方案2 1 已采纳 2018-08-12 11:25:47

解决方案1
1 2018-08-12 11:19:47

解决方案2
1 已采纳 2018-08-12 11:25:47