JavaScript在DOM中创建日历表

时间:2016-12-19 06:38:17

标签: javascript html dom

我创建了一个包含6行和5列的表。该表是为每个月创建的,可能具有不同的天数。我希望每个col显示1-30或1-31的日期(取决于月份)。

这是我到目前为止所做的:

function daysOfMonth(){
  var table= " ";
  var rows= 3;
   var cols=6;
  var number= 31;
  for(var r=0; r<rows; r++){
    table+= "<tr>";
        for(var c=0; c<=cols; c++){
                table+= "<td>" + c +"</td>"
      // each col should display number for(var i=0l i<=number; i++)
    }

table+= "</tr>"
 }
document.write('<table>' + table +"</table>")

};// func end

这是一个codepen http://codepen.io/cb42/pen/KNJWrd

1 个答案:

答案 0 :(得分:0)

我已经看到你的代码得到了两个小错误,在我的简单示例中解决了。 通过这个点,你可以尝试使它更好。但我希望它能帮助您了解如何制作日历。

https://jsfiddle.net/cyzbhkjs/

function daysOfMonth(){
  var _table= "<p>jol</p> ";
  var rows= 5;
   var cols=6;
  var c= 1;
  var daysMonth =31;
  for(var r=0; r<rows; r++){
    _table+= "<tr>";
        for(var i=0; i<=cols; i++){
        if(c<=daysMonth){
            _table+= "<td>" + c +"</td>";
        }else{
        break;
        }

          c++;
      // each col should display number at i
    }


_table+= "</tr>";

 }
 document.getElementById('calendar').innerHTML = '<table>hola' + _table +'</table>';

};
  daysOfMonth();

由于