Discussion :

[WickedSnitch]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

[solero07]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[WickedSnitch]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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";  
        }

[micetf]

Bonjour,

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

MiCetF

[solero07]

Je viens de tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[WickedSnitch]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[micetf]

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

[WickedSnitch]

C'est exact

[Lakhdr]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[progdebutant]

T'est fort en javascript Lakhdr +1

Merci pour ton code !