Remplir de couleur les cases d'un tableau

Bonjour à tous!
Etant novice en JavaScript, je viens solliciter votre aide. Je possède un tableau rempli de chiffres. L'exercice demandé consiste à remplir les cases du tableau en fonction du chiffre indiqué dans la case. Je vois très bien comment faire ça en C, en Java, mais en JS (et on doit utiliser la méthode du DOM, sous forme d'arbre), cela me reste flou. Voilà mon code pour remplir mon tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 for(var annees = 0; annees < Meteo.length; annees+=12) { // création d'un élément <tr> ligne = document.createElement("tr"); var k=0; for(var i = annees; i <= 11 + annees; i++) { cell = document.createElement("td"); texte = document.createTextNode(Meteo[i].temp); cell.appendChild(texte); ligne.appendChild(cell); j++; if(j==12) { cell = document.createElement("td"); texte = document.createTextNode(Meteo[i].annee); cell.appendChild(texte); ligne.appendChild(cell); j=0; }
Je me doute bien que des "if" vont être nécessaires mais je ne vois pas comment construire ça (quels éléments créer etc...). Je possède aussi (si cela aide) d'une feuille de style (déjà redirigée vers ma page HTML).

Merci d'avance!

Bonjour,
Il faut utiliser du javascript pur ou on peut passer par du jquery?
Si le tableau est déja créer, tu pourrais récupérer l'ensemble des cellules et boucler dessus pour les couleurs :
Code:

1 2 3 4 5 6 7 8 9 var table = document.getElementById("maTable"); var cellules = table.getElementsByTagName("td"); for (var i = 0; i < cellules.length; i++) { if ( cellules[i].html() <10) { cellules[i].style.backgroundColor = "red"; } else if (...) { etc... } }
ça doit donner un truc comme ça en js pur, on peut faire plus glamour avec jquery :)

Bonjour! On ne doit pas se servir de JQuery encore, je vais essayer ce que tu proposes, en esperant y parvenir! Merci de ta réponse :)

Update : J'ai essayé ce que tu proposes, j'ai ce type d'erreur dans la console du navigateur : "Uncaught TypeError: Cannot set property 'backgroundColor' of undefined"
Voilà monde code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
for(var i = 0; i < Meteo.length; i++){
 
            if(Meteo[i].temp<5)
                Meteo[i].style.backgroundColor = "red";
 
            else if ((Meteo[i].temp<10)&&(Meteo[i].temp>=5))
                Meteo[i].style.backgroundColor = "blue";
 
            else if ((Meteo[i].temp<15)&&(Meteo[i].temp>=10))
                Meteo[i].style.backgroundColor = "pink";  
 
            else if ((Meteo[i].temp<20)&&(Meteo[i].temp>=15))
                Meteo[i].style.backgroundColor = "green"; 
 
            else if ((Meteo[i].temp<25)&&(Meteo[i].temp>=20))
                Meteo[i].style.backgroundColor = "yellow"; 
 
            else if ((Meteo[i].temp<30)&&(Meteo[i].temp>=25))
                Meteo[i].style.backgroundColor = "white";  
        }

Bonjour,

Que contient Meteo (comment l'as-tu initialisé ?)

MiCetF

Je viens de tester :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<table id="maTable">
  <tr>
    <td>10</td>
    <td>5</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>10</td>
    <td>4</td> 
    <td>25</td>
  </tr>
</table>

Code:

1
2
3
4
5
6
7
var table = document.getElementById("maTable"); 
var cellules = table.getElementsByTagName("td"); 
for (var i = 0; i < cellules.length; i++) { 
    if ( cellules[i].textContent <10) { 
        cellules[i].style.backgroundColor = "red";
    } 
}

comme ça ça marche, je te laisse adapter selon tes besoins!

Bonne journée

Bonjour!
Météo est un objet sous forme de tableau contenant : une température, un mois, et une année. Je te mets les première lignes :
Code:

1 2 3 var Meteo = [ { annee: 1901 , mois: 1 , temp: -3 } , { annee: 1901 , mois: 2 , temp: -2 } , ...
Je vais voir comment arranger ce que vous proposez ! :)

Donc à partir de ce tableau (Array) JavaScript,
tu dois construire un tableau html (table)
dont chaque cellule aura une couleur de background qui dépend de la température...
J'ai bon ?
MiCetF

C'est exact

tu peux faire ca en combinant css et js
dans ta css tu crées des classes genre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
.froid{
 background-color:purple;
}
.frais{
 background-color:blue;
}
.tempere{
 background-color:yellow;
}
 
.chaud{
 background-color:red;
}

et dans ton js dans la boucle ajoute ceci:

Code:

1
2
3
4
5
6
                cell = document.createElement("td");
                texte = document.createTextNode(Meteo[i].temp);
var temperature=Meteo[i].temp/1 // caster en entier 
var cssClass=temperature<=5?"froid":temperature>5&&temperature<=15?"frais":temperature>15&&temperature<25?"tempere":"chaud";
cell.className=cssClass;
//et voila

T'est fort en javascript Lakhdr +1

Merci pour ton code !