Discussion :

[eliottgiraudo]

Bonjour,

Je cherche à colorer toutes les TD d'une colonne d'un tableau en javascript.
Je ne comprends pas comment sélectionner la colonne qui m'intéresse et parcourir chaque TD selon la valeur qu'elles contiennent !
En piece jointe l'architecture du tableau. !

La ligne surligné en bleu correspond à l'entete de la colonne.

Merci.

[SpaceFrog]

collection de tr ...
=> une boucle sur les tds avec comme départ l'indexe de la colonne et comme step le nombre de colonnes

[MisterPur]

Bonjour,

Je sais que l'on est dans le forum javascript mais pourquoi ne pas faire cela en CSS et la pseudo classe nth-child ?
par exemple :

Code :

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

td:nth-child(3){ background-color: red; }

Ce code ajoute un background à la troisième colonne de tout tes tableaux mais après tu peux tout à faire préciser un tableau en particulier.

Si tu veux vraiment utiliser le javascript tu peux toujours utiliser document.querySelectorAll('td:nth-child(3)') pour récupérer tout les 3ème td d'une ligne et en faire ce que tu veux.


En espérant avoir pu t'aider.

EDIT: je crois que je suis à coté de mes pompe, tu veux en fait pouvoir faire ça dynamiquement en cliquant dessus c'est ça ? (fiou désolé ^^ )
Donc si c'est bien cela, tu peux obtenir l'index de ta cellule grace à l'attribut cellIndex.
Imaginons avec un événement click sur les td qui affiche leur index :

Code :

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

1
2
3
4
5
 
NodeList.prototype.forEach = Array.prototype.forEach;
document.querySelectorAll('td').forEach(function(el){
        alert(this.cellIndex);
})

Après tu peux utiliser le nth-child en faisant :

Code :

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

1
2
3
4
5
 
var index = this.cellIndex +1;
           document.querySelectorAll('td:nth-child('+ index +')').forEach(function(el){
                el.style.backgroundColor = 'red';
            })

En espérant avoir mieux répondu à ton problème.

[Bovino]

A noter que

Code :

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

document.querySelectorAll('td:nth-child(3)')

ne fonctionnera pour IE qu'à partir de IE9, IE8 n'acceptant que les sélecteurs CSS2 et les versions antérieures ne reconnaissant pas querySelectorAll().

[MisterPur]

A noter que

Code :

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

document.querySelectorAll('td:nth-child(3)')

ne fonctionnera pour IE qu'à partir de IE9, IE8 n'acceptant que les sélecteurs CSS2 et les versions antérieures ne reconnaissant pas querySelectorAll().

Oui c'est exact, après il faut voir à qui cela est destiné aussi. Personnellement, Une compatibilité ie8 c'est bien pour les fonctionnalités principales.

[eliottgiraudo]

Je vous envoie en piece jointe une copie de mon tableau en exemple.
Jusqu'à présent le code utilisé est :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script language="javascript" type="text/javascript">
 
var x = document.getElementsByTagName("TD") // find all of the TDs 
  var i=0; 
  for (i=0;i<x.length;i++) 
  { 
 
    if (x[i].className=="ms-vb2") //find the TDs styled for lists 
    { 
 
      if ((x[i].innerHTML.toLowerCase()=="<div align=right>1</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>2</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>3</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>4</div>")) //find the data to use to determine the color 
      { 
        x[i].style.backgroundColor='lightgreen'; // set the color 
x[i].style.color='White'; //set the font color 
      } 
 
    //repeat the above for each data value 
 
if ((x[i].innerHTML.toLowerCase()=="<div align=right>5</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>6</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>7</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>8</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>9</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>10</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>11</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>12</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>13</div>")||(x[i].innerHTML.toLowerCase()=="<div align=right>14</div>")) //find the data to use to determine the color 
        { 
        x[i].style.backgroundColor='#FF9900'; // set the color
x[i].style.color='White'; //set the font color  
      } 
 
 if(x[i].innerHTML.toLowerCase()=="<div align=right>15</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>16</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>17</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>18</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>19</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>20</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>21</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>22</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>23</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>24</div>"||x[i].innerHTML.toLowerCase()=="<div align=right>25</div>") //find the data to use to determine the color 
       { 
        x[i].style.backgroundColor='#FF0033'; // set the color
x[i].style.color='White'; //set the font color 
      } 
if(x[i].innerHTML.toLowerCase()=="<div align=right>0</div>")
 {
x[i].style.backgroundColor='White'; // set the color
}
 
 
} 
} </script>

Le soucis c'est que la colonne "Priority" ne se trouve pas à la meme position dans tous les tableaux de la pages...
Et avec le code que j'ai actuellement, des que je rajoute une colonne ou il y a des chiffres il les colore.... Moi je veux uniquement traité les TD de ma colonne priority de tous les tableaux de la page...

[EDIT] => Je ne comprends pas comment la sélectionner je te renvoie la structure du tableau, qu'est ce que je peux utiliser ds le tableau pour sélectionner cette colonne ?!! Je suis perdu

[SpaceFrog]

Le soucis c'est que la colonne "Priority" ne se trouve pas à la meme position dans tous les tableaux de la pages

elle se distingue par quoi ???
récupère juste son indexe dans la collection des tds en testant une classe ? un contenu ...

[MisterPur]

J'allais dire la même chose que SpaceFrog. Si tu as la main sur l'HTML met lui une classe particulière et ça va devenir un jeu d'enfant.
Si tu ne peux pas il faut tester la valeur en parcourant les th de chaque tableau et récupérer l'index avec l'attribut cellIndex afin de colorer les td qui ont le même index mais je ne te le conseilles qu'en dernier recours.

[eliottgiraudo]

Je n'ai pas la main sur le HTML !! Mais si tu regardes la structure le th en question n'a pas de nom... rien du tout pour le sélectionner précisément...
Donc obligé de "il faut tester la valeur en parcourant les th de chaque tableau et récupérer l'index avec l'attribut cellIndex afin de colorer les td qui ont le même index "

=> je sais pas comment faire ça, il y a tellement de vocabulaire j'ai pourtant suivis plusieurs tutoriels (3 sur le javascript et JQuery). :'(

[SpaceFrog]

rien du tout pour le sélectionner précisément.

heu ben comment tu le distingues alors

[eliottgiraudo]

Il s'appelle priority ds le document mais ds la structure envoyée en piece jointe, aucun nom...

peut etre avec .innerHtml = 'Priority'...

Je ne sais pas...

[SpaceFrog]

c'est une bonne piste ...

[NoSmoking]

Bonjour,

peut etre avec .innerHtml = 'Priority'...

ou avec textContent || innerText.

http://www.developpez.net/forums/d13...td-javascript/, il s'en est causé dans cette discussion...

[eliottgiraudo]

Je n'arrive pas à écrire le code correspondant...

for td in th=priority je vois pas comment le traduire en javasript.......

[SpaceFrog]

Code :

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

ij (td.innerHTML=="Priority")

[eliottgiraudo]

Mais mes TD ne s'appelent pas "priority" c'est le TH de la colonne de ces TD qui s'appel priority (voir document joints)

[NoSmoking]

Mais mes TD ne s'appelent pas "priority" c'est le TH...

qu'est ce qui t'empêche de traiter les TH et non les TD

Tu aurais même intérêt à regarder ce que j'ai proposé sur le lien mis plus haut.

[eliottgiraudo]

Je ne vois absolument pas quel code mettre et ne comprends pas ce que vous me proposez.
Est ce que s'il vous plait vous pouvez juste me mettre le code...

qui attrape les TD de la colonne Priority pour vérifier leur contenu et en fonction de leur valeur je leur colle un background particulier.
A partir de ça vous m'expliquez le code.
Je sais que j'en demande beaucoup mais j'y arriverai pas sinon...

Merci beaucoup...

[NoSmoking]

et si tu nous montrais ce que tu as fait que l'on te corrige éventuellement, je parle bien sûr du code concernant la recherche de la bonne colonne .

[eliottgiraudo]

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
24
25
26
27
28
$(function() {
  var lesTD=$('selectionner le tableau').('tr').innerhtml('Priority').('td'):
 
//je ne peux pas sélectionner le tableau, je n'ai pas la main sur le Html, le tableau n'a pas d'id et je ne sais pas le combien tableau de la page c'est...
 
for td.innerhtml in lesTD
{
    var laTD=td.innerhtml
   switch (laTD)
  {
       case laTD<5 && >0: laTD.css('background-color', 'white');
                     break;
        case laTD<10 && >5: laTD.css('background-color', 'green');
                     break;
        case laTD<15 && >10: laTD.css('background-color', 'orange');
                     break;
 
        case laTD<20 && >15: laTD.css('background-color', 'red');
                     break;
 
       default: laTD.css('background-color', '<hite');   
   }
 
}
 
 
 
});