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 ...