IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut [Débutant] Changer style d'un élément ?
    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.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut
    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 ?

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    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>

  6. #6
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut
    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>

  7. #7
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut
    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>

    ???

  8. #8
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    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 ?

  9. #9
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut
    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 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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Faire changer le style d'un élément avec un select
    Par X260SH dans le forum Général JavaScript
    Réponses: 17
    Dernier message: 29/03/2014, 12h02
  2. [UI Mobile] Changer le style d'un élément d'une liste(listview) au clic
    Par LaurentC33 dans le forum jQuery
    Réponses: 2
    Dernier message: 03/03/2014, 10h27
  3. Réponses: 2
    Dernier message: 23/06/2004, 13h56
  4. Réponses: 5
    Dernier message: 24/04/2003, 11h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo