[Débutant] Changer style d'un élément ?

Version imprimable

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 ! :mouarf:

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:

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.

Code:

val.style.bold;

c'est nouveau ???

Code:

val.style.fontWeight='bold';

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

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

21/06/2007, 17h24
ghohm

Citation:

Envoyé par SpaceFrog

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 ?

Code:

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

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

:arrow: SpaceFrog :

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

Code:

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>

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

Code:

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>

???

et comme ceci :question:

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

Citation:

Envoyé par Auteur

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

Le fond.

Donc comme ceci :

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

21/06/2007, 19h32
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 ...
21/06/2007, 19h52
SpaceFrog

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

Code:

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
21/06/2007, 20h40
ghohm

Citation:

Envoyé par SpaceFrog

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

Code:

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 !
21/06/2007, 22h19
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. ;)
22/06/2007, 09h10
ghohm

Citation:

Envoyé par 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. ;)

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" !

Citation:

Envoyé par ghohm

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

C'est exactement cela que je souhaitais faire :

Code:

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:

<body onload="modifStyle()">

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