首页 > 解决方案 > 用 javascript 创建一个表

问题描述

这是我的第一个 JS 代码,我按照教科书的说明进行操作,但表格仍然没有显示在网页上。我id="eventList"已经添加到我的 HTML 中并缩短了数组。这是我的JS的代码。

var eventDates = ["July 29, 2018 11:00:00", "July 30, 2018 19:00:00"];

var eventDescriptions = ["Classics Brunch", "Lasers and Light"];

var eventPrices = ["$12", "$12/$18/$24"];

var thisDay = new Date("August 30, 2018");

var tableHTML = "<table id='eventTable'><caption>Upcoming Events</caption> 
                     <tr><th>Date</th><th>Event</th><th>Price</th></tr>";

var endDate = new Date();
endDate = thisDay.getTime() + 14 * 24 * 61 * 61 * 1000;

for (var i = 0; i < eventDates.length; ++i) {
  var eventDate = new Date();
  eventDate = eventDates[i];

  var eventDay = eventDate.toDateString();

  var eventTime = eventDate.toLocaleTimeString();

  if ((thisDay <= eventDate) && (eventDate <= endDate))
    tableHTML = "<tr><td>eventDay @ eventTime</td><td>description</td> 
      <td>price</td></tr>" + eventDay + eventTime;

    var description = eventDescriptions[i];
    var price = eventPrices[i];

  }

  tableHTML = "</table>";

  document.getElementById("eventList").innerHTML = tableHTML;
<div id="eventList">
</div>

它应该看起来像这样

标签: javascripthtmlcssecmascript-6webpage

解决方案


tableHTML = "</table>";

无论何时您分配一个值,tableHTML您都会用新值覆盖它并丢弃旧值。

也许你的意思是:

tableHTML = tableHTML + "</table>";

推荐阅读