Surligner le jour actuel sur un tableau <div> en utilisant Javascript

Question

Bonjour, je suis en train de chercher à mettre en évidence le jour actuel dans un tableau

(en utilisant css et jQuery) mais je n'arrive pas à comprendre (je ne veux pas utiliser php car cela doit être dynamique)

Voici une partie de ce que j'ai fait.

  Rooster semaine 15

    .rTable {
      display: table;
      width: 100%;
    }
    .rTableRow {
      display: table-row;
    }
    .rTableHeading {
      display: table-header-group;
      background-color: orange;
      font-weight: bold;
    }
    .rTableBody {
      display: table-row-group;
    }
    .rTableFoot {
      display: table-footer-group;
      font-weight: bold;
      background-color: orange;
    }
    .rTableCell,
    .rTableHead {
      display: table-cell;
    }
    .cZondag {
      display: table-row;
      background-color: lightgreen;
      font-weight: bold;
    }
    .cMaandag {
      display: table-row;
      background-color: lightgreen;
      font-weight: bold;
    }
    //.cDinsdag { display: table-row; background-color: lightgreen; font-weight: bold;}
    //.cWoensdag { display: table-row; background-color: lightgreen; font-weight: bold;}
    //.cDonderdag { display: table-row; background-color: lightgreen; font-weight: bold;}
    //.cVrijdag { display: table-row; background-color: lightgreen; font-weight: bold;}
    //.cZaterdag { display: table-row; background-color: lightgreen; font-weight: bold;}

    function myFunction() {
      var d = new Date();
      var weekday = new Array(7);
      weekday[0] = "Zondag";
      weekday[1] = "Maandag";
      weekday[2] = "Dinsdag";
      weekday[3] = "Woensdag";
      weekday[4] = "Donderdag";
      weekday[5] = "Vrijdag";
      weekday[6] = "Zaterdag";

      var n = weekday[d.getDay()];
      var nTable = document.getElementById('maandag');
      // document.write(nTable); // debugging only

    }
    myFunction()

  Rooster Semaine 15 Richard van Soest

      Semaine précédente

      Semaine suivante

      Clés

        Jour

        Route
        Début
        Durée

          11-04
          Maandag
          EX 3
          15:15
          3:30

          12-04
          Dinsdag
          EX 3
          15:15
          3:30

          13-04
          Woensdag
          EX 3
          15:15
          3:30

          14-04
          Donderdag
          EX 3
          15:15
          3:30

          15-04
          Vrijdag
          EX 3
          15:15
          3:30

        Total

        14:00

      Contrôle
      qui allez-vous appeler
      Appelez CU

Le code est généré par un script VBA dans Excel où les données proviennent et sont téléchargées automatiquement sur un serveur.

Cela est censé fonctionner sur un écran de téléphone (plein écran)

Answer 1

Veuillez noter que mon code ne surlignera que lorsque le tableau contiendra une date approximative.

function pad(num) {
  return String("0"+num).slice(-2);
}
$(function() {
  var d = new Date(); // test avec new Date(2016,3,14); Les mois JS commencent à partir de 0
  var ddmm = ""+pad(d.getDate())+"-"+pad(d.getMonth()+1);
  $(".rTableRow:contains('"+ddmm+"')").addClass("highlight");
});

.highlight { background-color:red }

Rooster Week 15 Richard van Soest

    Vorige week

    Volgende week

    Sleutels

      Jour

      Route
      Début
      Durée

        11-04
        Lundi
        EX 3
        15:15
        3:30

        12-04
        Mardi
        EX 3
        15:15
        3:30

        13-04
        Mercredi
        EX 3
        15:15
        3:30

        14-04
        Jeudi
        EX 3
        15:15
        3:30

        15-04
        Vendredi
        EX 3
        15:15
        3:30

      Total

      14:00

    Control
    qui allez-vous appeler
    Call CU

Answer 2

Je ne suis pas trop sûr de ce qu'est le champ de date actuel, donc je suppose que c'est un premier enregistrement. Vous pouvez le faire sans jquery. ci-dessous un exemple de code

/*Fonctionne seulement quand on survole l'élément*/
 .rTableRow > div:first-child:hover{
background-color:red; }

 /* Fonctionne tout le temps*/
 .rTableRow > div:first-child{
background-color:red;  }