根据今天的日期显示/隐藏 TD答案

【问题标题】：Show / Hide TD based on TODAY's Date根据今天的日期显示/隐藏 TD
【发布时间】：2021-03-04 01:04:01
【问题描述】：

我正在尝试根据今天的日期隐藏 td，以便用户只有在今天的日期匹配时才能看到“立即注册”按钮。

<table class="events-table" >
<thead class="events-thead">
    <tr class="events-tr">
      <th class="event-time" scope="col">Date/Time</th>
      <th class="event-description" scope="col">Event</th>
    </tr>
  </thead>
  <tbody class="events-tbody">
    <tr class="events-tr">
      <td class="events-td">4 March</td>
      <td class="events-link"> Desc. </td>
      <td class="cta-td">
        <a href="#"> Register Now</a>
      </td>
    </tr>
  </tbody>
</table>

这里是JSFiddle。

我在网站上使用 Wordpress 并尝试使用 Javascript 提出解决方案？

谢谢！

【问题讨论】：

你能发布你编码的JS吗？ :) StackOverflow 不是代码编写服务。您应该首先自己编写代码。请更新您的问题，以在minimal reproducible example 中显示您迄今为止所做/尝试过的事情。
document.querySelector('.events-td').textContent == new Date().toLocaleString('en-gb',{day:'numeric',month:'long'});
@Miu 我已经更新了 JSFiddle。
@RobG 感谢您的详细回复。我非常感谢，但我实际上是在 Wordpress 上，无法确定日期，因为这些基本上是通过插件发布的事件。

标签： javascript date events show-hide

【解决方案1】：

您想以与您要查找的单元格中日期格式相匹配的方式设置今天的日期格式，然后查看单元格中的文本，例如

// Setup
// Formaters
let formatDate1 = d => d.toLocaleString('en-gb',{day:'numeric', month:'long'});
let formatDate2 = d => d.toLocaleString('en-ca',{year:'numeric',month:'2-digit',day:'2-digit'});

// Get date for 2 days ago
let d = new Date();
d.setDate(d.getDate() - 2);
// Add 5 rows to table with dates
let table = document.querySelector('.events-table');
let rowTemplate = document.getElementById('eventRowTemplate');
for (let i=5; i; i--) {
  let tr = rowTemplate.content.cloneNode(true);
  let td = tr.querySelector('td')
  td.textContent = formatDate1(d);
  td.setAttribute('data-eventDate',formatDate2(d));
  table.appendChild(tr);
  d.setDate(d.getDate() + 1);
}

// Example - Add register button to today's cell
// Get today in correct format
let s = formatDate2(new Date());
// Get the cell
let cell = document.querySelector('td[data-eventDate="' + s + '"]');
// Highlight it
cell.classList.add('highlight');
// Add a button
let button = cell.appendChild(document.createElement('button'));
// Configure button
button.textContent = 'Register';
button.addEventListener('click',()=>alert('Register ' + s));

table {border-collapse: collapse;}
td {border: 1px solid #bbbbbb;}
.highlight {
  font-weight: bold;
  color: red;
}

<table class="events-table"></table>

<template id="eventRowTemplate">
  <tr><td class="events-td">foo</td></tr>
</template>

更好的方法是根据日期为单元格提供标识符，可能是类、ID 或数据属性（例如data-eventDate="2021-03-04"），然后您可以直接获取该单元格，而不必遍历所有单元格events-td 单元格，例如

// Add class to cell for 4 March
let cell = document.querySelector('td[data-eventDate="2021-03-04"]')
if (cell) cell.classList.add('boldText');
// Add listeners, etc.

.boldText {font-weight: bold}

<table>
  <tr><td data-eventDate="2021-03-03">3 March
  <tr><td data-eventDate="2021-03-04">4 March
  <tr><td data-eventDate="2021-03-05">5 March
</table>

当然，您仍然会根据今天的日期生成值，就像第一个示例一样，为了方便起见，我只是对其进行了硬编码。

【讨论】：