18041 sujets

Questions générales et questions de débutants

[Résolu] Mise en forme "conditionnelle" d'une couleur de fond de ligne

bonjour,

je souhaiterais faire apparaitre une ligne d'un tableau (plusieurs <td>) d'une couleur selon la semaine en cours, dont le numéro apparait en début de ligne dans le 1° <td>



je joins l'URL de la page web : http://gerard.marin.free.fr/RSRBR/ResultsHebdo/index.html
Je joins du code pour exemple sur semaines 29 à 31, pour compréhension .

  <tr>
    <td><div align="center" class="Style8"><strong>29</strong></div></td>
    <td><div align="left"></div></td>
    <td><ul>
      
    </ul></td>
  </tr>
  <tr>
    <td><div align="center" class="Style8"><strong>30</strong></div></td>
    <td><div align="left"></div></td>
    <td><ul>
      
    </ul></td>
  </tr>
  <tr>
    <td><div align="center" class="Style8"><strong>31</strong></div></td>
    <td><div align="left"></div></td>
    <td><ul>
      
    </ul></td>
  </tr>



<style type="text/css">
.Style8 {font-size: 18px; color: #FFFF99;}
.Style8:hover, Style8:focus {color:#FF0000; font-weight: bold; font-size: 18px;}
td {background-color:transparent;height:10px;}
td:hover{background-color:#3366FF;height:auto;}
 /* unvisited link */
a:link { color:#FFFF00;}

/* visited link */
a:visited { color:#00CC33}
</style>
Salut

J'ai pas trop compris la condition qui permettrais de mettre la ligne en couleur.

Pour mettre en couleur c'est simple c'est en css. Mais si tu rajoute une condition alors je préconiserais javascript (surtout si tu dois calculer avec des dates et des jours etc..)
Merci de ton intérêt pour le sujet .

la condition, c'est le numéro de semaine .
Par exemple cette semaine on est la semaine 46, je souhaite que la ligne "complète" concernant la semaine 46 soit avec un fond de couleur spécifique pendant la semaine en cours .
Et ce, tout au long de l'année ...
Modifié par 6troen (12 Nov 2018 - 16:14)
Ok du coup, comment est ce que ton tableau est créer ? c'est du HTML en dur ? ou du PHP dynamic ?
Ah.... c'est un peu plus compliquer du coup
Perso, j'utilise JQUERY
Et voici mon résultat avec une partie de ton tableau (on voit bien que 46 est en couleur)

https://codepen.io/JUSEN/pen/BGQmYZ

Soit, quelqu'un du forum est chaud pour te traduire mon code en javascript pure et dans ce cas tu copie colle, soit tu dois obligatoirement ajouter jquery à ton projet et pour cela il faut ajouter la librairie dans le <head> de ton site :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Pour utiliser JQUERY il faut utiliser un fichier .js et l'ajouter à ton projet (site web) comme une fichier css dans la balise <head> également.
Ensuite dans le fichier .js que tu aura créer il faut mettre mon code dans un .document.ready() comme cela : 

$( document ).ready(function() {
    //Ici tu place mon code jquery qui est présent dans le liens que je t'ai partagé plus haut.
});


à la fin tu dois avoir 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="mon/fichier/jquery.js"></script>
. Il faut respecter l'ordre de chargement, en premier il faut charger jquery pour après pouvoir l'utiliser dans ton fichier perso.
Modifié par JENCAL (12 Nov 2018 - 17:53)
Magnifique !
J'en avais rêvé ....
Merci à tous les deux, aliasdmc & JENCAL .

Vite la semaine prochaine que je voie la ligne de la S47 en rouge ! Smiley cligne
Je ne sais pas qui déclarer comme meilleure solution, car ne comprenant pas la différence entre "avec Jquery" et "sans Jquery", mais constatant que çà fonctionne comme je le souhaitais, je suis bien perplexe pour le choix !
Pour moi, néophyte : égalité ... Smiley biggrin Smiley clapclap

Merci encore .
Si j'ose après mise en place (avec le Jquery de JENCAL), comment faire pour qu'une ancre permette que cette même semaine courante soit visible dans l'écran à l'ouverture du lien .
Par exemple, j'ai mis une id "week" dans le div de la semaine où je publie ma page, et je l'appelle avec #week dans mon lien url .
Mais il ne faut pas que j'oublie de la bouger chaque semaine ! Smiley rolleyes
Si c'était lié au script ... Smiley confused
Jquery et Javascript : quelle différence ?
Où peut-on apprendre l'un ou l'autre, du moins, les bases ?

Merci . Smiley cligne
Bonjour 6troen,

J'ai mis a jour le codepend
pour ajouter l'ancre automatiquement, donc cela t'évitera de la gérer, tu la laisse dans le lien et le js fait le reste
https://codepen.io/Zonecss/pen/eQByoz
Ps ) il semble que le script pour trouver la semaine soit pas juste, j'ai mis un lien en plus
là, c'est javascript ? Smiley rolleyes

Je vais essayer, car je n'avais essayé que la solution Jquery . Smiley ravi

Je ne comprends toujours pas la différence .... Smiley decu
aliasdmc a écrit :
Bonjour 6troen,

jquery est un Framework qui est fait avec javascript :
https://fr.wikipedia.org/wiki/Framework_JavaScript
Pour l'utiliser tu dois importer le fichier js "jquery.js" donc cela implique de télécharger une ressource en plus.
Si tu utilises le javascript pur c'est dans le navigateur


Oui voila,
Jquery faut le voire comme du "javascript" simplifié. mais utilisable uniquement avec un fichier externe (une librairie) qui est importer dans ton <head> html.
Sujet clos
Aller à