时间戳

首页 > 解决方案 > 你如何在到期日使html表中的一行变灰

javascript - 你如何在到期日使html表中的一行变灰

问题描述

因此，我试图在到期日期时将 HTML 表格行变灰。我不希望数据消失或隐藏。我只是想让该行变灰或类似的东西。也许让它无法点击？这可以用javascript吗？对此深表歉意，但我不是很精通 javascript，但是我确实对它的工作原理有所了解。

这是我的 html 表的基本示例（原始表位于带有引导类的 div 中：col-lg-8）

<table class="table table-striped">
    <thead class="table-dark" align="center">
        <th scope="col" align="center" width="400">Training Description</th>
        <th scope="col" align="center">Cost (Excl Vat)</th>
        <th scope="col" align="center">Location</th>
        <th scope="col" align="center">Training Date</th>
        <th scope="col" align="center"></th>
    </thead>
    <thead><th colspan="5" align="center">JUNE 2021</th></thead>
    <tbody>
        <tr>
            <td align="left" valign="middle"><b>Basic Computer Training</b></td>
            <td align="center" valign="middle"><b>free</b></td>
            <td align="center" valign="middle">Online - Zoom</td>
            <td align="center" valign="middle">11-June-2021</td>
            <td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
        </tr>
    </tbody>
</table>

我想在培训日期后的第二天灰显并禁用注册链接。不确定这是否需要使用 aclass=""或id="". 数据显然是用html代码编写的静态数据，如上图所示。

如果有人问过这个问题，我很抱歉，我只是无法找到任何关于此的内容。非常感谢任何帮助。

标签： javascripthtmljquerycss

解决方案

javascript方法将是这样的：

  • 查找<tr>表格正文中的所有元素
  • 对于这些元素中的每一个，查找第 4 个单元格，其中包含日期
  • 将该日期文本解析为时间戳
  • 将时间戳与浏览器时间进行比较
  • 如果时间戳早于当前时间，则添加一个指示该行已过期的类
  • 在 CSS 中设置过期类的样式

以下是它在代码中的工作方式：

const rowIsExpired = tr => {
  const dateCell = tr.querySelector("td:nth-child(4)");
  const dateString = dateCell.innerText;
  const timestamp = Date.parse(dateString);
  
  return timestamp < Date.now();
}

const tableRows = document.querySelectorAll("tbody > tr");
tableRows.forEach(tr => {
  tr.classList.toggle("expired", rowIsExpired(tr));
});
.expired {
  opacity: .4;
}
<table class="table table-striped">
    <thead class="table-dark" align="center">
      <tr>
        <th scope="col" align="center" width="400">Training Description</th>
        <th scope="col" align="center">Cost (Excl Vat)</th>
        <th scope="col" align="center">Location</th>
        <th scope="col" align="center">Training Date</th>
        <th scope="col" align="center"></th>
      </tr>
    </thead>
    <thead><th colspan="5" align="center">JUNE 2021</th></thead>
    <tbody>
        <tr>
            <td align="left" valign="middle"><b>Basic Computer Training</b></td>
            <td align="center" valign="middle"><b>free</b></td>
            <td align="center" valign="middle">Online - Zoom</td>
            <td align="center" valign="middle">11-June-2021</td>
            <td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
        </tr>
        <tr>
            <td align="left" valign="middle"><b>Another Computer Training</b></td>
            <td align="center" valign="middle"><b>expensive</b></td>
            <td align="center" valign="middle">Online - Zoom</td>
            <td align="center" valign="middle">11-August-2021</td>
            <td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
        </tr>
    </tbody>
</table>

小心！

这里有一些问题：

  • 如果要确保无法单击该链接，则需要禁用该链接。最好不仅pointer-events在 css 中使用它，而且实际上在 HTML 源代码中禁用它
  • 这使用浏览器的时间。如果加载页面的用户有错误的系统时钟或奇怪的时区，结果可能会有所不同！
  • 从字符串中解析日期可能会产生意想不到的结果。确保单元格文本的格式可以为您提供正确的结果。
  • 我找到到期日的方式很脆弱。如果您更改列的顺序，它将中断。最好在 HTML 中添加特定的属性或类，这样您就可以确保在 javascript 中很容易找到它。

推荐阅读