JavaScript循环表未正确放置

Question

我正在尝试制作日历，但是顶部的日志名称并非如此。星期日的盒子“太阳”漂浮在左上方，我希望它能在其他日子（星期一左边）旁边。

    var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var today = new Date();
    var dag = today.getDay();
    var myMonth = today.getMonth();
    var jaar = today.getFullYear();
    var volBtn = document.getElementById('Volgende');
    var vorBtn = document.getElementById('Vorige');

    function Kalender() {
      var myHTML = '';

      myHTML += '<div id="month">' + monthNames[myMonth] + " " + jaar + '</div><table id="cal">';
      for (var i = 0; i < dayNames.length; i++) {
        myHTML += '<td>' + dayNames[i] + ' ' + '</td>';
        if (i % 6 == 0) {
          myHTML += "</tr>";
        }
      };
      for (var i = 1; i <= monthLength[myMonth]; i++) {
        myHTML += "<td><a href='#'>" + i + "</a></td> ";

        if (i % 7 == 0) {
          myHTML += "</tr>";
        }
      }
      myHTML += '</table>';

      document.getElementById('div').innerHTML = myHTML;
    }

    var VolgendeFunc = function() {
      myMonth = myMonth + 1;

      if (myMonth == 11) {
        volBtn.disabled = true;
        vorBtn.disabled = false;
      } else {
        vorBtn.disabled = false;
        volBtn.disabled = false;
      }

      document.getElementById('month').innerHTML = myMonth;
      Kalender();
    }
    var VorigeFunc = function() {
      myMonth = myMonth - 1;

      if (myMonth == 0) {
        vorBtn.disabled = true;
        volBtn.disabled = false;
      } else {
        vorBtn.disabled = false;
        volBtn.disabled = false;
      }

      document.getElementById('month').innerHTML = myMonth;
      Kalender();
    }

    Kalender();

    #div {
      font-size: 19px;
    }
    #div tr {
      color: #2b2b2b;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #e6e6e6;
      cursor: default;
    }
    #cal {
      font-size: 30px;
      -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
      -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
      margin: 50px auto;
      font: "Helvetica Neue";
      display: table;
    }
    #cal td {
      color: #2b2b2b;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #e6e6e6;
      cursor: default;
    }

<center>
  <button id="Vorige" onclick="VorigeFunc()">Vorige</button>
  <button id="Volgende" onclick="VolgendeFunc()">Volgende</button>
  <div id="div">
    <script type="text/javascript" src="Kal.js">
    </script>

  </div>
</center>

Answer 1

您永远不会为您只关闭它们的行添加开始<tr>标记。

＆＃13;

＆＃13;

    var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var today = new Date();
    var dag = today.getDay();
    var myMonth = today.getMonth();
    var jaar = today.getFullYear();
    var volBtn = document.getElementById('Volgende');
    var vorBtn = document.getElementById('Vorige');

    function Kalender() {
      var myHTML = '';

      myHTML += '<div id="month">' + monthNames[myMonth] + " " + jaar + '</div><table id="cal"><thead><tr>';
  

      for (var i = 0; i < dayNames.length; i++) {
        myHTML += '<td>' + dayNames[i] + ' ' + '</td>';
      };
      myHTML += "</tr></thead><tbody>";


      var rows = []
      var row = "";
      for (var i = 1; i <= monthLength[myMonth]; i++) {
        row += "<td><a href='#'>" + i + "</a></td> ";

        if (i % 7 == 0 || i===monthLength[myMonth]) {
          rows.push(row);
          row = "";
        }
      }
 
     myHTML += "<tr>" + rows.join("</tr><tr>") + "</tr>"; 

      myHTML += '</tbody></table>';

      document.getElementById('div').innerHTML = myHTML;
    }

    var VolgendeFunc = function() {
      myMonth = myMonth + 1;

      if (myMonth == 11) {
        volBtn.disabled = true;
        vorBtn.disabled = false;
      } else {
        vorBtn.disabled = false;
        volBtn.disabled = false;
      }

      document.getElementById('month').innerHTML = myMonth;
      Kalender();
    }
    var VorigeFunc = function() {
      myMonth = myMonth - 1;

      if (myMonth == 0) {
        vorBtn.disabled = true;
        volBtn.disabled = false;
      } else {
        vorBtn.disabled = false;
        volBtn.disabled = false;
      }

      document.getElementById('month').innerHTML = myMonth;
      Kalender();
    }

    Kalender();

＆＃13;

    #div {
      font-size: 19px;
    }
    #div tr {
      color: #2b2b2b;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #e6e6e6;
      cursor: default;
    }
    #cal {
      font-size: 30px;
      -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
      -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
      margin: 50px auto;
      font: "Helvetica Neue";
      display: table;
    }
    #cal td {
      color: #2b2b2b;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #e6e6e6;
      cursor: default;
    }

＆＃13;

<center>
  <button id="Vorige" onclick="VorigeFunc()">Vorige</button>
  <button id="Volgende" onclick="VolgendeFunc()">Volgende</button>
  <div id="div">
    <script type="text/javascript" src="Kal.js">
    </script>

  </div>
</center>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改：

  myHTML += '<div id="month">' + monthNames[myMonth] + " " + jaar + '</div><table id="cal">';
      for (var i = 0; i < dayNames.length; i++) {
        myHTML += '<td>' + dayNames[i] + ' ' + '</td>';
        if (i % 6 == 0) {
          myHTML += "</tr>";
        }
      };

为：

 myHTML += '<div id="month">' + monthNames[myMonth] + " " + jaar + '</div><table id="cal"><tr>';
  for (var i = 0; i < dayNames.length; i++) {
    myHTML += '<td class="yo">' + dayNames[i] + ' ' + '</td>';
  };
  myHTML += '</tr>';

工作？

Answer 3

您的for循环不同，这会导致'太阳'的偏移：

for (var i = 0; i < dayNames.length; i++){
    myHTML += '<td>' + dayNames[i] + ' ' + '</td>';
    if (i%6 == 0){
        myHTML += "</tr>";
    } 
};
for (var i=1; i <= monthLength[myMonth]; i++){
    myHTML+="<td><a href='#'>" + i + "</a></td> ";

    if (i%7 == 0){
        myHTML += "</tr>";
    } 
}

将它们更改为：

for (var i = 0; i < dayNames.length; i++){
    myHTML += '<td>' + dayNames[i] + ' ' + '</td>';
    if ((i+1)%7 == 0){
        myHTML += "</tr>";
    } 
};
for (var i = 0; i < monthLength[myMonth]; i++){
    myHTML+="<td><a href='#'>" + (i + 1) + "</a></td> ";

    if ((i+1)%7 == 0){
        myHTML += "</tr>";
    } 
}

应解决您的问题：http://jsfiddle.net/166ea9n9/