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.