Question

我正在尝试根据日期显示复选标记图像，事件列表的日期格式为 2021 年 3 月 28 日

例如：

如果活动日期是 2021 年 3 月 29 日 然后它将显示以下图像（绿色复选框）

<img src="https://i.imgur.com/iw9fm7A.jpg">

但如果今天日期是 2021 年 3 月 28 日，并且事件尚未发生然后它不会显示任何图像，只是空白。

代码：

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

Answer 1

下面的简短脚本将遍历包含我添加到 HTML 中的 date 类的表格单元格。

它会将其解析为一个数字，表示自 1970 年 1 月 1 日以来的毫秒数。然后它将将该数字与今天的毫秒数进行比较。如果表格中的解析日期已过，它会将图像的 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>

如果您对它的工作原理感到好奇，可以查看一些文档：

根据日期显示图像

1 个答案: