Discussion :

[ghohm]

Bonjour à tous,

je cherche à changer le contenu d'un élément qui contient "OK" pour l'afficher en gras et en vert et "NOK" en gras et en rouge !


Mon problème est que cet élément peut-être répété plein de fois, car il correspond à la 3ème colonne d'un tableau ... il me faut donc boucler.

Voilà comment j'ai essayé, mais ne possédant pas de débugger JS ... je sais pas d'où vient l'erreur !?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
	function modifStyle() {
		while (val = document.getByTagName("td").className="txt") {
			if (val.value == "OK") {
				val.style.color="#008B00";
				val.style.bold;
			} else if (val.value == "NOK") {
				val.style.backgroundColor="#E72100";
				val.style.bold;
			}
		}
	}
</script>

Gôm

PS : Il faut simplement que cela fonctionne sur ie >= 6.

[SpaceFrog]

Code :

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

val.style.bold;

c'est nouveau ???

Code :

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

val.style.fontWeight='bold';

oulà et j'avais pas vu le reste ^^
pour boucler sur les tds..

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
	function modifStyle() {
 
      var tabTds=document.getElementBuId('iddutableau').getElementsByTagName("td")
      for (i=0;i<tabTds.length;i++){		...
	}
</script>

pour le reste j'ai pas compris le coup du className

[ghohm]

pour le reste j'ai pas compris le coup du className

C'était simplement pour isoler uniquement les TDs étant de "class" CSS : "txt".


Mon soucis est que je possède plein de tableaux sur cette page et que je souhaiterais récupérer tous les TDs étant de class "txt" parmi l'ensemble de mes tableaux.

Et non, récupérer tous les TDs d'un tableau précis.


Suis-je claire ?

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
	function modifStyle() {
      var SelTds = new Array()  
      var AllTds=document.getElementBuId('iddutableau').getElementsByTagName("td")
      for (i=0;i<AllTds.length;i++){		
             if (AllTds[i].className=='txt'){SeTds.push(AllTds[i]}
	}
</script>

et là dasn SelTds tu n'as que les td de class txt

[javatwister]

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
<table id="tableau">
	<tbody>
		<tr>
			<td>truc</td><td>truc</td><td>OK</td><td>truc</td>
		</tr>
		<tr>
			<td>truc</td><td>truc</td><td>NOK</td><td>truc</td>
		</tr>
		<tr>
			<td>truc</td><td>truc</td><td>NOK</td><td>truc</td>
		</tr>
		<tr>
			<td>truc</td><td>truc</td><td>OK</td><td>truc</td>
		</tr>
	</tbody>
</table>
 
<script type="text/javascript">
 
var l=document.getElementById("tableau").tBodies[0].rows;
 
for(i=0;i!=l.length;i++){
	l[i].cells[2].style.fontWeight='bold';
	l[i].cells[2].style.color= l[i].cells[2].firstChild.data=="OK" ? "#008B00" : "#E72100";	
}
 
</script>

[ghohm]

SpaceFrog :

Ce n'est pas de ça dont tu parlais ?

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
<script type="text/javascript">
	function modifStyle() {
		var SelTds = new Array();
		var AllTds = document.getElementById("test").getElementsByTagName("td");
 
		for (i=0;i<AllTds.length;i++) {
			if (AllTds[i].className == "txt") {
				SelTds.push(AllTds[i]);
			}
		}
		for (i=0;i<SelTds.length;i++) {
			if (SelTds[i] == "OK") {
				SelTds[i].style.color = "#008B00";
				SelTds[i].style.fontWeight = "bold";
			} else if (SelTds[i] == "NOK") {
				SelTds[i].style.backgroundColor = "#E72100";
				SelTds[i].style.fontWeight = "bold";
			}
		}
	}
</script>

[ghohm]

Mon tableau se présente différemment de ton exemple javatwister ... du coup ça ne fonctionne pas !

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
<table id="test">
	<tbody>
		<tr>
			<th>TITRE</th>
		</tr>
		<tr>
			<td class="ss-titre">Sous-titre</td>
		</tr>
		<tr>
			<td>truc</td>
			<td>OK</td>
		</tr>
	</tbody>
</table>
 
<script type="text/javascript">
	var l = document.getElementById("test").tBodies[0].rows;
 
	for(i=0;i!=l.length;i++){
		l[i].cells[1].style.fontWeight='bold';
		l[i].cells[1].style.color = l[i].cells[1].firstChild.data == "OK" ? "#008B00" : "#E72100";	
	}
</script>

???

[Auteur]

et comme ceci

Code javascript :

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
 
    function modifStyle()
    {
        var i, oTD;
        var allTDs = document.getElementsByTagName("td");
        var n = allTDs.length;
 
        for (i=0; i<n; i++)
        {
            oTD = allTDs[i];
            if (oTD.className=="txt")
            {
                if (oTD.innerHTML.toLowerCase()=="ok")
                {
                  oTD.style.color="#008B00";
		  oTD.style.fontWeight = "bold";
                }
                if (oTD.innerHTML.toLowerCase()=="nok")
                {
                  oTD.style.color="#E72100";  //color ou backgroundColor ?
		  oTD.style.fontWeight = "bold";
                }
            }
        }
       }

Pour le cas NOK c'est le texte ou le fond de la cellue qui doit être rouge ?

[ghohm]

Pour le cas NOK c'est le texte ou le fond de la cellue qui doit être rouge ?

Le fond.

Donc comme ceci :

Code javascript :

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
 
    function modifStyle()
    {
        var i, oTD;
        var allTDs = document.getElementsByTagName("td");
        var n = allTDs.length;
 
        for (i=0; i<n; i++)
        {
            oTD = allTDs[i];
            if (oTD.className=="txt")
            {
                if (oTD.innerHTML.toLowerCase()=="ok")
                {
                  oTD.style.color="#008B00";
		  oTD.style.fontWeight = "bold";
                }
                if (oTD.innerHTML.toLowerCase()=="nok")
                {
                  oTD.style.backgroundColor = "#E72100";
		  oTD.style.fontWeight = "bold";
                }
            }
        }
       }

Merci Auteur, je teste ça dès demain matin.

[ghohm]

Juste par curiosité : ne serait-il pas possible d'identifier tous les éléments (sur l'ensemble des éléments de ma page HTML), uniquement à partir de la valeur de leur attribut "class" ?

Sans utiliser pour autant le "id", car il me faudrait boucler pour changer les attributs CSS qui m'intéressent et un "id" doit être unique ...

[SpaceFrog]

tu peux éventuellement ajouter dans la class un flag ...

Code :

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

class="txt obj1"

ce second élément n'aurait pas d'incidence sur l'affichage
et un split sur le className permettrait de récupérer le flag obj1

[ghohm]

tu peux éventuellement ajouter dans la class un flag ...

Code :

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

class="txt obj1"

ce second élément n'aurait pas d'incidence sur l'affichage
et un split sur le className permettrait de récupérer le flag obj1

Sauf erreur de ma part, je n'ai pas intérêt à faire cela, puisque je veux récupérer TOUS les éléments de ma page quelque soit leur balise, qui aient un class = "txt !

[Auteur]

Si tu veux connaître la liste des classes attribuées à un élément de ta page, tu peux jeter un coup d'oeil à cette discussion.

[ghohm]

Si tu veux connaître la liste des classes attribuées à un élément de ta page, tu peux jeter un coup d'oeil à cette discussion.

C'est l'inverse que je souhaite faire !

Je veux connaître la liste des éléments de ma page ayant une classe commune appelée : "txt" !

[ghohm]

Merci Auteur, je teste ça dès demain matin.

C'est exactement cela que je souhaitais faire :

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
function modifStyle() {
       var i, oTD;
       var allTDs = document.getElementsByTagName("td");
       var n = allTDs.length;
 
       for (i=0 ; i<n ; i++)
       {
           oTD = allTDs[i];
           if (oTD.className == "txt")
           {
               if (oTD.innerHTML == "OK")
               {
                 oTD.style.color = "#008B00";
                 oTD.style.fontWeight = "bold";
               }
               if (oTD.innerHTML == "NOK")
               {
                 oTD.style.backgroundColor = "#E72100";
                 oTD.style.fontWeight = "bold";
               }
           }
       }
}

Code :

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

<body onload="modifStyle()">

Auteur ... et à tous les autres pour m'avoir donné des conseils !