使用JavaSript时，如何在具有多个值的日期列的表中突出显示“今天”的每个日期
使用JavaSript时，如何在具有多个值的日期列的表中突出显示“今天”的每个日期
提问于 2021-06-17 01:48:03
我有一个静态生成的表，如下所示：
<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>我想突出显示“今天”的任何日期，或者可能将文本更改为“今天”或“n天前”。我假设我需要一个函数来迭代日期，并以某种方式更改/突出显示日期。
HTML每3天生成一次，所以我不能生成'today‘值，但我可以控制这个生成。我不知道用户什么时候会查看页面，所以可能是第3天，所以JS需要做这项工作。
有什么建议吗？这是我的第一篇帖子，所以对于发帖中的任何错误，我深表歉意。我使用的不是JQuery，而是Bootstrap4和popper.js。相对于JS来说，我是一个新手。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-17 02:01:23
如果您为任何日期准备了一个date对象-例如今天-那么您可以检查循环中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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68007731
复制相关文章
相似问题
腾讯云开发者
