Conditions sur les tables HTML

boodur Messages postés 247 Statut Membre -  
boodur Messages postés 247 Statut Membre -
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



--
Le ridicule ne tue pas. Ce qui ne nous tue pas nous rend plus fort. Donc le ridicule rend plus fort.

6 réponses

  1. juloo6578 Messages postés 57 Statut Membre 12
     
    Créer un fichier css que tu nom cequetuveux.css

    place entre <head> et </head> :

    " <link rel="stylesheet" href="cequetuveux.css" type="text/css" /> "

    place dans cequetuveux.css :

    "
    tr {
    // ici le style que tu veux mettre pour chaque <tr></tr> de ta page html
    }
    table {
    // ici le style que tu veux mettre pour chaque <table></table> de ta page
    }
    td {
    // ici le style que tu veux mettre pour chaque <td></td> 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)

    "
    <span class="nom_de_ta_class">Texte</span>
    "

    Je te conseille de regarder le cours sur le CSS sur le site du zéro
    0
  2. boodur Messages postés 247 Statut Membre 44
     
    J'ai déjà cherché partout =S

    Mais ce que je veux, c'est éviter d'avoir un truc du style :

    <td style="background-color:#87E990"> 2 </td>

    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.
    0
  3. juloo6578 Messages postés 57 Statut Membre 12
     
    dans le CSS t'écrit :

    td{
    background-color: #87E99;
    }
    0
  4. boodur Messages postés 247 Statut Membre 44
     
    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.
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. juloo6578 Messages postés 57 Statut Membre 12
     
    Passe par du PHP

    Je te conseille de lire les tutos sur le site du zéro
    0
    1. AssassinTourist Messages postés 409 Date d'inscription   Statut Contributeur Dernière intervention   1 313
       
      Oui, si tu veux passer par le conditionnel, soit c'est php, soit c'est javascript.
      0
  7. mpmp93 Messages postés 2931 Date d'inscription   Statut Membre Dernière intervention   1 343
     
    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+
    0
    1. mpmp93 Messages postés 2931 Date d'inscription   Statut Membre Dernière intervention   1 343
       
      un script à tester avec JQuery:

      <script type="text/javascript">
      $(function() {
      $(".tablecell").each(function() {
      // get text into variable
      var colText = $(this).text();
      // need to create an action
      if (colText == '2') {
      $(this).addClass("green-color");
      }
      });
      });


      A+
      0
    2. boodur Messages postés 247 Statut Membre 44
       
      Le soucis, c'est que je débute en html ^^ on voit que des trucs "primaires", les balises classiques, genre "font-color", text-decoration, toussa toussa, et un peu de mise en page, j'ai juste voulu anticiper, mais visiblement, ça a l'air plus compliqué que prévu =p
      0