Conditions sur les tables HTML Fermé

Question

Bonjour à tous, 

J'aimerais savoir comment insérer des conditions sur les cellules d'un tableau selon les valeurs qui y sont, en utilisant le CSS. Etant donné que mon tableau comporte 324 cases, j'aimerais éviter de recopier "background-color : ..." 324 fois, alors que mon tableau ne comportera que 7 valeurs différentes.

Merci de vos réponses, 

Boodur



Configuration: Windows XP / Safari 535.19

juloo6578 · Answer

Créer un fichier css que tu nom cequetuveux.css place entre et : " " place dans cequetuveux.css : " tr { // ici le style que tu veux mettre pour chaque de ta page html } table { // ici le style que tu veux mettre pour chaque

de ta page } td { // ici le style que tu veux mettre pour chaque de ta page html } " Tu peux faire ça pour chaque balise Tu peux également créer des class : " .nom_de_ta_class{ // ici le style que tu veux mettre pour la class .nom_de_ta_class } " Maintenant dans le HTML : (marche avec chaque balise) " Texte " Je te conseille de regarder le cours sur le CSS sur le site du zéro

boodur · Answer

J'ai déjà cherché partout =S Mais ce que je veux, c'est éviter d'avoir un truc du style : 2 sur mes 324 cases, c'est plutôt que dans ma table, dès que le chiffre "2" apparaît, le fond de la cellule ou il est devient vert.

juloo6578 · Answer

dans le CSS t'écrit :

td{
background-color: #87E99;
}

boodur · Answer

Oui, mais ça va colorier toutes les cellules ^^' 
J'voudrais plutôt un truc du style : 

Si y'a un 2 dans la cellule : on colore en vert, 
Si y'a un 4 dans la cellule: on colore en jaune, 
Si y'a un 6 dans la cellule: on colore en bleu, 
etc... 
Le ridicule ne tue pas. Ce qui ne nous tue pas nous rend plus fort. Donc le ridicule rend plus fort.

juloo6578 · Answer

Passe par du PHP

Je te conseille de lire les tutos sur le site du zéro

mpmp93 · Answer

Bonjour,

Je conseille d'utiliser la librairie JQuery.

Une piste (non testée):

ele=document.getElementById('tabid').getElementsByTagName('td');
  var cont;
  for(var i=0;i<ele.length;i++)
  {
   cont=ele[i].innerHTML.split('');
   switch(cont[0])
   {
     case 2:
     ele[i].className='green-color';
     break;
     ... // rajouter autant de case x: pour les autres valeurs...

   }
  }

et il faut avoir une classe en css:

.green-color { color: green; }


A+

Conditions sur les tables HTML

6 réponses

Discussions similaires