tableau récupérer les TD d'une colonne

Version imprimable

Voir 40 message(s) de cette discussion en une page

10/10/2013, 11h01
eliottgiraudo

1 pièce(s) jointe(s)

tableau récupérer les TD d'une colonne

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.
10/10/2013, 11h09
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
10/10/2013, 11h27
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:

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:

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:

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.
10/10/2013, 11h34
Bovino

A noter que

Code:

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(). ;)
10/10/2013, 11h55
MisterPur

Citation:

Envoyé par Bovino

A noter que

Code:

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.

2 pièce(s) jointe(s)

suite

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

Code:

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

10/10/2013, 11h57
SpaceFrog

Citation:

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 ...
10/10/2013, 12h10
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. ;)
10/10/2013, 16h42
eliottgiraudo

suite

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). :'(
10/10/2013, 16h59
SpaceFrog

Citation:

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

heu ben comment tu le distingues alors :koi:
10/10/2013, 17h02
eliottgiraudo

suite

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...
10/10/2013, 17h04
SpaceFrog

c'est une bonne piste ...
11/10/2013, 13h45
NoSmoking

Bonjour,

Citation:

Envoyé par eliottgiraudo

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

ou avec textContent || innerText.

:fleche: http://www.developpez.net/forums/d13...td-javascript/, il s'en est causé dans cette discussion...
11/10/2013, 15h12
eliottgiraudo

suite

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

for td in th=priority je vois pas comment le traduire en javasript.......
11/10/2013, 15h15
SpaceFrog

Code:

ij (td.innerHTML=="Priority")
11/10/2013, 16h15
eliottgiraudo

suite

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)
11/10/2013, 16h27
NoSmoking

Citation:

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 :koi:

Tu aurais même intérêt à regarder ce que j'ai proposé sur le lien mis plus haut.
11/10/2013, 18h10
eliottgiraudo

suite

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...
11/10/2013, 18h31
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 ;).

suite

Code:

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');   
   }
 
}
 
 
 
});

Voir 40 message(s) de cette discussion en une page