Toepassing 2: openingsuren markeren

★ Open selectors/toep_openingsuren.html.

Openingsuren op dinsdag

De pagina bevat twee tabellen waarop we de openingsuren van vandaag markeren. Elke weekdag komt overeen met één rij binnen de tbody-tag. Merk op dat we de tabel ook starten met zondag. Dit is een bewuste keuze omdat we het rijnummer dan makkelijk kunnen koppelen aan de weekdag van het Date-object.

<table class="table">
    <thead>...</thead>
    <tbody>
        <tr>
            <td><b>Zondag</b></td>
            <td>Gesloten</td>
            <td>Gesloten</td>
            <td>Gesloten</td>
        </tr>
        ...
    </tbody>
</table>

★ Voeg volgende code toe.

$(function() {
    var vandaag = new Date();
    var dag = vandaag.getDay();
    $('tbody tr:nth-child(' + (dag + 1) + ')').css('background-color', 'greenYellow');
});

Op lijn 3 halen we de weekdag op. (zondag = 0, maandag = 1, ...). Vervolgens gaan we op lijn 4 dit getal met één verhogen om zo de juiste rij binnen tbody te markeren met een groen-gele achtergrond.

Merk op dat de pagina twee tabellen bevat en dat we daarom tr:nth-child() gebruiken en niet tr:eq(). tr:eq() zou enkel een rij in de eerste tabel markeren.