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 :

Modifier couleur de fond d'une cellule d'un tableau dynamiquement.


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    172
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 172
    Par défaut Modifier couleur de fond d'une cellule d'un tableau dynamiquement.
    Bonjour,

    Savez-vous s'il est possible de modifier dynamiquement la couleur de fond d'une cellule d'un tableau html ? Je développe :

    En fait j'ai une liste déroulante avec une réponse, oui ou non, si oui la case du tableau à coté est de couleur verte, si la réponse est non => modification automatique de la cellule en rouge.

    J'ai fais des recherche mais apparement c'est impossible, mais si vous avez des idées je suis preneur

    Merci.

  2. #2
    Membre expérimenté
    Profil pro
    Inscrit en
    Février 2007
    Messages
    265
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 265
    Par défaut
    salut,

    impossible n'est pas francais c'est pourtant bien connu :o)

    Tu definis 2 classes css avec les 2 couleurs que tu veux et tu appelle une fonction JS sur le onclick de ton select qui te modifie le nom de la classe selon l'option selectionnee.

  3. #3
    Membre expérimenté
    Profil pro
    Inscrit en
    Février 2007
    Messages
    265
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 265
    Par défaut
    sur le onchange plutot que le onclick d'ailleurs

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    172
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 172
    Par défaut
    Ok merci, mais est ce qu'il est possible de définir un nom pour une cellule spécifique d'un tableau ? pour pas modifier le tableau entier ?

  5. #5
    Membre expérimenté
    Profil pro
    Inscrit en
    Février 2007
    Messages
    265
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 265
    Par défaut
    oui tu peux specifier un id par cellule.

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    172
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 172
    Par défaut
    Merci mais ça fonctionne pas, je vois pas ou j'ai fais une erreur :

    J'ai fais mes deux classes :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #fondvert
    { background-color: green ;}
    #fondrouge
    { background-color: red ; }

    J'ai donné un nom à ma cellule du tableau :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <td name="cel1'' id='fondvert'>

    et j'ai fais une fonction javascript que j'appelle sur le onChange de ma liste déroulante avec une ligne :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.cel1.setAttribute("class","fondrouge") ;
    Est ce que j'ai fais des erreurs de syntaxe quelque part ou utilisé une mauvaise fonction ?

    Merci.

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Tu définis des style pour des id et tu ajoutes une class...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre expérimenté
    Profil pro
    Inscrit en
    Février 2007
    Messages
    265
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 265
    Par défaut
    Et tu as aussi une erreur de frappe dans ton name cel1.
    Tu as ouvert le name avec un guillemet double et tu l'as refermé avec 2 guillemets simples.

  9. #9
    Membre confirmé
    Inscrit en
    Janvier 2009
    Messages
    163
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 163
    Par défaut
    Clic sur un bouton => changement de couleur.

    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
    <head>
    <style type="text/css">
    td.fondvert
    { background-color: green ;color: white ;}
    td.fondrouge
    { background-color: red ; color: white ;}
    </style>
    <script type="text/javascript">
    function cc(idcol) {
    	class=document.getElementById(idcol).className;
    //	alert(class+" / "+idcol);
    	if (class=="fondrouge")
    	{document.getElementById(idcol).className="fondvert"}
    	 else
     {document.getElementById(idcol).className="fondrouge"}
    }
    </script>	
    </head>
    <body>
    Change la couleur de la colonne 1 : &nbsp
    <input type="button" value="GO" onclick="cc('c11')">
    <br>
    Change la couleur de la colonne 2 : &nbsp
    <input type="button" value="GO" onclick="cc('c12')">
    <br>	
    <table>
    <tr>

Discussions similaires

  1. Réponses: 1
    Dernier message: 22/11/2012, 15h16
  2. Réponses: 4
    Dernier message: 26/08/2010, 08h20
  3. Couleur de fond d'une cellule variable
    Par Cafu3 dans le forum Débuter
    Réponses: 2
    Dernier message: 19/03/2009, 10h56
  4. [VB.NET][DataGridView]:couleur de fond d'une cellule
    Par BigTicket42 dans le forum Windows Forms
    Réponses: 8
    Dernier message: 13/05/2008, 22h07
  5. mise à jour de la couleur de fond d'une cellule
    Par Lady_jade dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 02/11/2005, 11h18

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