使用 JavaScript，如何在 table 中突出显示 'today' 的每个日期，其中的日期列包含多个值

Question

我有一个静态生成的 table，类似于以下内容：

<table>
   <tr><td> Thing 1 </td><td> 2021-06-01 </td></tr>
   <tr><td> Thing 2 </td><td> 2021-06-01 </td></tr>
   <tr><td> Thing 3 </td><td> 2021-06-01 </td></tr>
</table>

我想突出显示 'today' 的任何日期，或者可能将文本更改为 'Today' 或 'n Days Ago'。我假设我需要一个函数来遍历日期并以某种方式 alters/highlights 它们。

HTML 每 3 天生成一次，所以我无法生成 'today' 值，但我确实控制了这一代。我不知道用户什么时候会查看页面，所以可能是第 3 天，所以 JS 需要完成工作。

有什么建议吗？这是我的第一个 post，对于 post 中的任何错误，我们深表歉意。我没有使用 JQuery，而是使用 Bootstrap 4 和 popper.js。我是JS的相对小白。

Answer 1

如果您为任何日期准备一个日期对象 - 例如今天 - 那么您可以检查循环中 td 单元格的 innerText 并根据需要替换

// get today's date ready
let today = new Date(), refDate = new Date();
today = today.toISOString().split("T").slice(0, -1)[0]

yesterday = new Date(refDate);
yesterday = new Date(yesterday.setDate(yesterday.getDate() - 1));
yesterday = yesterday.toISOString().split("T").slice(0, -1)[0];

tomorrow = new Date(refDate);
tomorrow = new Date(tomorrow.setDate(tomorrow.getDate() + 1));
tomorrow = tomorrow.toISOString().split("T").slice(0, -1)[0];

function isDate(v) {
  v = v.split("-");
  let isDate = true;
  v.forEach((d, i) => {
    if (i === 0 && (d.length != 4 || parseInt(d) === 0)) isDate = false;
    else if (i > 0 && (d.length != 2 || parseInt(d) === 0)) isDate = false
  })
  return isDate;
}

let tds = document.querySelectorAll('td');
tds.forEach(td => {
  let val = td.innerText.trim(),
    oneweek = (1000 * 60 * 60 * 24 * 7)
  if (val === today) td.innerText = "Today"
  else if (val === yesterday) td.innerText = "Yesterday"
  else if (val === tomorrow) td.innerText = "Tomorrow"
  else if (isDate(val) && new Date().getTime() - new Date(val).getTime() > oneweek) td.innerText = 'more than one week ago';
})

<table>
  <tr>
    <td> Thing 1 </td>
    <td> 2021-06-16 </td>
  </tr>
  <tr>
    <td> Thing 2 </td>
    <td> 2021-06-15 </td>
  </tr>
  <tr>
    <td> Thing 3 </td>
    <td> 2021-06-01 </td>
  </tr>
  <tr>
    <td> Thing 4 </td>
    <td> 2021-06-17 </td>
  </tr>
  <tr>
    <td> Thing 4 </td>
    <td> 2021-07-17 </td>
  </tr>
</table>

使用 JavaScript，如何在 table 中突出显示 'today' 的每个日期，其中的日期列包含多个值

Using JavaSript, how can I highlight each date that is 'today' in a table which has a date column with multiple values

html

javascript

datetime

html-table

bootstrap-4