时间戳

首页 > 解决方案 > 通过javascript创建日历

javascript - 通过javascript创建日历

问题描述

我想创建一个从第 1 天到第 30 天tr的简单日历。我创建了一个示例用于尝试自己理解。tdjavascriptconsole.log()

当我尝试从 切换console.log()到document.getlementById("calendar")打印时html，它没有打印。该错误表明

calendar.js:3 Uncaught ReferenceError: Invalid left-hand side in assignment

我的理解console.log()：


for (var i = 1; i <= 5; i++) {
  //open tr tag
  console.log("<tr>");

  for(var i = 1; i <= 30; i++){
    var days = "<td>" + i + "</td>";
    //print 1 to 31 with td tag
    console.log(days);

    //if i divide by 7 and remainder is 0
    if(i % 7 == 0 || i == 31){
      console.log("</tr>");
      console.log("<tr>");
    }
  };
  console.log("</tr>");
};

实际我的代码document.getElementById("calendar")


for (var i = 1; i <= 5; i++) {
  //open tr tag
  document.getElementById("calendar") += "<tr>";
  for(var i = 1; i <= 30; i++){
    var days = "<td>" + i + "</td>";
    //print 1 to 31 with td tag
    document.getElementById("calendar") += days;
    //if i divide by 7 and remainder is 0
    if(i % 7 == 0 || i == 31){
      document.getElementById("calendar") += "</tr>";
      document.getElementById("calendar") += "<tr>";
    }
  };
  document.getElementById("calendar") += "</tr>";
};

我的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div >
        <table>
            <tr>
                <th>S</th>
                <th>M</th>
                <th>T</th>
                <th>W</th>
                <th>T</th>
                <th>F</th>
                <th>S</th>
            </tr>
            <span id="calendar">

            </span>
        </table>
    </div>
    <script src="js/calendar.js" ></script> 
</body>
</html>

该错误表明

未捕获的 ReferenceError：分配中的左侧无效

标签： javascripthtml

解决方案

首先，你不能<span>在你放置它的桌子里面有一个。一张桌子只能<tr>在这个地方有一个。但是你根本不需要这个跨度，你可以直接将字符串附加到表中，所以我将 ID 移到了<table>-tag 中。

我还使用了一个变量来构建所有的 HTML，在构建完所有 HTML 之后，我在表格末尾使用insertAdjacentHTML()插入了它。

var table = document.getElementById("calendar");
var htmlstring = "";
for (var i = 1; i <= 5; i++) {
  //open tr tag
  htmlstring += "<tr>";
  for (var i = 1; i <= 30; i++) {
    var days = "<td>" + i + "</td>";
    //print 1 to 31 with td tag
    htmlstring += days;
    //if i divide by 7 and remainder is 0
    if (i % 7 == 0 || i == 31) {
      htmlstring += "</tr>";
      htmlstring += "<tr>";
    }
  };
  htmlstring += "</tr>";
};
//console.log(htmlstring);
table.insertAdjacentHTML('beforeend', htmlstring)
<div>
  <table id="calendar">
    <tr>
      <th>S</th>
      <th>M</th>
      <th>T</th>
      <th>W</th>
      <th>T</th>
      <th>F</th>
      <th>S</th>
    </tr>
  </table>
</div>

推荐阅读