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

如何解决根据今天的日期显示/隐藏 TD

我试图根据今天的日期隐藏 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 提出解决方案？

谢谢！

解决方法

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

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

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