这是我的第一个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>
答案 0 :(得分:2)
tableHTML = "</table>";
每次为tableHTML
分配一个值时,都会用新值覆盖它并丢弃旧值。
也许你是说:
tableHTML = tableHTML + "</table>";
答案 1 :(得分:1)
问题是您在使用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>";