时间戳

首页 > 解决方案 > 如何为多个小时表加粗一天？

javascript - 如何为多个小时表加粗一天？

问题描述

我目前有这段代码，它突出显示了我拥有的小时表的日期。它为一张桌子正确地完成了这项工作，但不适用于其他桌子。我在这个页面上总共有 4 个表，需要它为每个表加粗。

<script>
        var days = 'sunday,monday,tuesday,wednesday,thursday,friday,saturday'.split(',');
        document.getElementById( days[(new Date()).getDay()] ).className = 'pw-bold';
</script>

<table style="width: 100%; margin-bottom: 50px;">
    <tbody>
        <tr>
            <th class="pw-table-header">Hours</th>
        </tr>
        <tr>
            <td class="pw-table">
                <div id="sunday">Sunday</div>
            </td>
            <td class="pw-table">Closed</td>
        </tr>
        <tr>
            <td class="pw-table">
                <div id="monday">Monday</div>
            </td>
            <td class="pw-table">7:00am - 4:00pm</td>
        </tr>
        <tr>
            <td class="pw-table">
                <div id="tuesday">Tuesday</div>
            </td>
            <td class="pw-table">7:00am - 4:00pm</td>
        </tr>
        <tr>
            <td class="pw-table">
                <div id="wednesday">Wednesday</div>
            </td>
            <td class="pw-table">7:00am - 4:00pm</td>
        </tr>
        <tr>
            <td class="pw-table">
                <div id="thursday">Thursday</div>
            </td>
            <td class="pw-table">7:00am - 4:00pm</td>
        </tr>
        <tr>
            <td class="pw-table">
                <div id="friday">Friday</div>
            </td>
            <td class="pw-table">7:00am - 4:00pm</td>
        </tr>
        <tr>
            <td class="pw-table">
                <div id="saturday">Saturday</div>
            </td>
            <td class="pw-table">Closed</td>
        </tr>
    </tbody>
</table>

.pw-bold{font-weight: bold;}

标签： javascripthtmlcsswebhtml-table

解决方案

ids 必须是唯一的，这可能是问题的原因。

尝试使用自定义数据id属性或类。

例如：

var days = 'sunday,monday,tuesday,wednesday,thursday,friday,saturday'.split(',');
document.querySelectorAll('[data-id=' + days[(new Date()).getDay()]).forEach(e => e.className = 'pw-bold')
.pw-bold {
  font-weight: bold;
}
<table style="width: 100%; margin-bottom: 50px;">
  <tbody>
    <tr>
      <th class="pw-table-header">Hours</th>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="sunday">Sunday</div>
      </td>
      <td class="pw-table">Closed</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="monday">Monday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="tuesday">Tuesday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="wednesday">Wednesday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="thursday">Thursday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="friday">Friday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="saturday">Saturday</div>
      </td>
      <td class="pw-table">Closed</td>
    </tr>
  </tbody>
</table>

<hr/>

<table style="width: 100%; margin-bottom: 50px;">
  <tbody>
    <tr>
      <th class="pw-table-header">Hours</th>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="sunday">Sunday</div>
      </td>
      <td class="pw-table">Closed</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="monday">Monday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="tuesday">Tuesday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="wednesday">Wednesday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="thursday">Thursday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="friday">Friday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="saturday">Saturday</div>
      </td>
      <td class="pw-table">Closed</td>
    </tr>
  </tbody>
</table>

<hr/>

<table style="width: 100%; margin-bottom: 50px;">
  <tbody>
    <tr>
      <th class="pw-table-header">Hours</th>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="sunday">Sunday</div>
      </td>
      <td class="pw-table">Closed</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="monday">Monday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="tuesday">Tuesday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="wednesday">Wednesday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="thursday">Thursday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="friday">Friday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="saturday">Saturday</div>
      </td>
      <td class="pw-table">Closed</td>
    </tr>
  </tbody>
</table>

<hr/>

<table style="width: 100%; margin-bottom: 50px;">
  <tbody>
    <tr>
      <th class="pw-table-header">Hours</th>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="sunday">Sunday</div>
      </td>
      <td class="pw-table">Closed</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="monday">Monday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="tuesday">Tuesday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="wednesday">Wednesday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="thursday">Thursday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="friday">Friday</div>
      </td>
      <td class="pw-table">7:00am - 4:00pm</td>
    </tr>
    <tr>
      <td class="pw-table">
        <div data-id="saturday">Saturday</div>
      </td>
      <td class="pw-table">Closed</td>
    </tr>
  </tbody>
</table>

<hr/>

推荐阅读