javascript - html 中粗体显示今天的营业时间

Question

我正在设计我公司的网站，我想知道如何才能使其在营业时间内以粗体显示当前日期和今天的时间。

<div class='hours'>
  <h4>Hours of Operation</h4>
  <table class="opening-days">
    <tr>
      <th>Monday</th>
      <td>9am - 5pm</td>
    </tr>
    <tr>
      <th>Tuesday</th>
      <td>9am - 5pm</td>
    </tr>
    <tr>
      <th>Wednesday</th>
      <td>9am - 5pm</td>
    </tr>
    <tr>
      <th>Thursday</th>
      <td>9am - 5pm</td>
    </tr>
    <tr>
      <th>Friday</th>
      <td>9am - 5pm</td>
    </tr>
    <tr>
      <th>Saturday</th>
      <td>Closed</td>
    </tr>
    <tr>
      <th>Sunday</th>
      <td>Closed</td>
    </tr>
  </table>
</div>

这就是我的代码。我在想也许我可以添加一段 JavaScript 代码来加粗当前日期。请帮助我，因为我对 JS 不太熟悉。这是一个 JS fiddle :http://jsfiddle.net/q6b84r7y/4/

Answer 1

我删除了<th>标签来自你的 table ，因为据我所知 <th>标签应该用来代替 <thead>标签，并了解它们在技术上如何在不成文的 <tbody> 中使用(旁注，我还在 tbody 标签中添加了)

我觉得代码相当简单，但如果您有任何问题，请评论。

编辑我意识到周日可能会错误地表现为 today.getDay()会返回 0，所以我添加了一个快速修复。如果我能想到更优雅的东西，我稍后会更新它，但这应该可行。

document.addEventListener('DOMContentLoaded', function() {
  var today = new Date();
  var todaysHours = document.querySelector('.opening-days tr:nth-child(' + ( today.getDay() == 0 ? 7 : today.getDay() ) + ')');
  todaysHours.classList.add('bold')
});

.bold {
  font-weight: bold;
}

<div class='hours'>
  <h4>Hours of Operation</h4>
  <table class="opening-days">
    <tbody>
      <tr>
        <td class="week-day">Monday</td>
        <td>9am - 5pm</td>
      </tr>
      <tr>
        <td class="week-day">Tuesday</td>
        <td>9am - 5pm</td>
      </tr>
      <tr>
        <td class="week-day">Wednesday</td>
        <td>9am - 5pm</td>
      </tr>
      <tr>
        <td class="week-day">Thursday</td>
        <td>9am - 5pm</td>
      </tr>
      <tr>
        <td class="week-day">Friday</td>
        <td>9am - 5pm</td>
      </tr>
      <tr>
        <td class="week-day">Saturday</td>
        <td>Closed</td>
      </tr>
      <tr>
        <td class="week-day">Sunday</td>
        <td>Closed</td>
      </tr>
    </tbody>
  </table>
</div>