Показать изображение по дате
Я пытаюсь показать изображение галочки на основе даты, формат даты - 28 марта 2021 г. для списка событий
Например:
если дата события - 29 марта 2021 г. тогда он покажет следующее изображение (зеленый флажок)
<img src = "https://i.imgur.com/iw9fm7A.jpg">
но если сегодня дата была 28 марта 2021 года, а событие еще не произошло тогда он не будет показывать никаких изображений, просто пустой.
Код:
<table width = "80%" border = "1" cellspacing = "0" cellpadding = "0">
<tr>
<td>Event Name</td>
<td>Event Date</td>
<td>Completed? </td>
</tr>
<tr>
<td>E-Bike meet up at <strong>Los Angeles, Griffith Park</strong></td>
<td>March 29, 2021</td>
<td>Show Checkbox Here</td>
</tr>
<tr>
<td>E-Bike meet up at <strong>Los Angeles, State Historic Park</strong></td>
<td>April 5, 2021</td>
<td>Leave empty</td>
</tr>
</table>
Я не вижу здесь никаких попыток с вашей стороны. Как узнать, какое изображение использовать? Возможно, вы хотите использовать два массива вместе с конструктором Date?
Пожалуйста, посмотрите мои мои правки, это просто таблица, которую мы используем для событий, но хотели бы, чтобы флажок появлялся автоматически в зависимости от сегодняшней даты и даты события.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Приведенный ниже короткий сценарий будет проходить по ячейкам таблицы, имеющим класс date, который я добавил в ваш HTML.
Он проанализирует его как число, представляющее количество миллисекунд с 1 января 1970 года. Затем он сравнит это число с сегодняшним количеством миллисекунд. Если проанализированная дата из таблицы прошла, он добавит HTML-код изображения в следующую соседнюю ячейку или сделает ее пустой.
document.querySelectorAll(".date").forEach(d=>{
d.nextElementSibling.innerHTML = (Date.parse(d.innerText)<Date.now()) ? '<img src = "https://i.imgur.com/iw9fm7A.jpg">' : ''
})<table width = "80%" border = "1" cellspacing = "0" cellpadding = "0">
<tr>
<td>Event Name</td>
<td>Event Date</td>
<td>Completed? </td>
</tr>
<tr>
<td>E-Bike meet up at <strong>Los Angeles, Griffith Park</strong></td>
<td class = "date">March 29, 2021</td>
<td>Show Checkbox Here</td>
</tr>
<tr>
<td>E-Bike meet up at <strong>Los Angeles, State Historic Park</strong></td>
<td class = "date">April 5, 2021</td>
<td>Leave empty</td>
</tr>
</table>Некоторая документация, на которую стоит обратить внимание, если вам интересно, как это работает:
Спасибо! Я получаю сообщение об ошибке в строке document.querySelectorAll
Убедитесь, что вы добавили class = "date" в HTML.
В вашем вопросе нет кода. Пожалуйста, прочтите Минимальный воспроизводимый пример