用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小提琴：http://jsfiddle.net/q6b84r7y/4/

Answer 1

我从您的表中删除了<th>标签，因为据我所知，<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>