如何為多個小時表加粗一天？

Question

我目前有這段代碼，它突出顯示了我擁有的小時表的一天。 它可以為一張桌子正確地完成這項工作，但不能為其他桌子完成這項工作。 我在這個頁面上總共有 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;}

Answer 1

id必須是唯一的，這可能是問題的原因。

嘗試使用自定義數據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/>