jeudi 29 juillet 2021

How to bold day for multiple hour tables?

I currently have this code which highlights the day for an hours table that I have. It does this job properly for the one table, but not for the others. I have 4 tables in total on this page and need it to bold the day for each of them.

<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;}



Aucun commentaire:

Enregistrer un commentaire