用javascript创建一个表

Question

这是我的第一个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>

Answer 1

tableHTML = "</table>";

无论是将值分配给tableHTML，都要用新值覆盖它并丢弃旧值。

也许你的意思是：

tableHTML = tableHTML + "</table>";

Answer 2

问题是你在使用tableHTML时不断重新分配= - 你需要使用+=附加/连接新的HTML：

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>";