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 :

[Javascript]Mise en valeur d'un tr avec checkbox


Sujet :

JavaScript

  1. #1
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut [Javascript]Mise en valeur d'un tr avec checkbox
    Voila, j'ai un tableau comprenant différentes données, pour chaque ligne j'ai un checkbox puis les données, le checkbox representant la ligen de donnees lol..
    J'aimerai que lorsque une box est checké, la couleur du tr soit automatiquement changé pour refléter le changement.

    L'utilisation de Javascript me semble inévitable

    j'ai cherché un peu partout mais on ne parle de ce genre d'actions qu'avec des mouseover....

    j'imaginais eventuellement une fonction qui passe le numero de la ligne du checkbox, je peux recuperer le tr via un getelementbyname suivi de l'indice sur mon objet, mais c'est apres pour affecter la couleur (le style css) que je suis largué...


    Si quelqu'un a une idée ou un bout de code à me faire partager

    Merci d'avance

  2. #2
    Expert confirmé
    Avatar de Swoög
    Profil pro
    Inscrit en
    Janvier 2003
    Messages
    6 045
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Janvier 2003
    Messages : 6 045
    Par défaut
    regarde du côté de onClick pour ton problème, ensuite, pour la couleur de fond du tr, tu peux toujours utiliser .style.backgroundColor
    Rédacteur "éclectique" (XML, Cours PHP, Cours JavaScript, IRC, Web...)
    Les Règles du Forum - Mon Site Web sur DVP.com (Développement Web, PHP, (X)HTML/CSS, SQL, XML, IRC)
    je ne répondrai à aucune question technique via MP, MSN ou Skype : les Forums sont là pour ça !!! Merci de me demander avant de m'ajouter à vos contacts sinon je bloque !
    pensez à la balise [ code ] (bouton #) et au tag :resolu: (en bas)

  3. #3
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    J'ai codé ca :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    	var tableau = document.getElementByName('table');
    	var ligne = tableau[1].getElementByName('tr');
     
    	tr[CatIDStr].style.setCLass = "select";
    ca peche déjà sur le getElementByName que firefox ne connait pas....

    Sinon c'est plausible le tr[CatIDStr].style.setCLass = "select"; pour changer la classe d'un tr ?

  4. #4
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    J'ai une erreur : tableau has no properties.... ca veut dire qu'il n'arrive pas à récupérer d'elements table ?

    mon dernier code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    	var tableau = new Array();
    	var ligne = new Array();
    	tableau = document.getElementsByName('table')[1];
     
    	ligne = tableau.getElementsByName('tr');
     
    	ligne[CatIDStr].className = "select";
    Thk

  5. #5
    Expert confirmé
    Avatar de Swoög
    Profil pro
    Inscrit en
    Janvier 2003
    Messages
    6 045
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Janvier 2003
    Messages : 6 045
    Par défaut
    getElementsByName (tout comme getElementById) ne peut s'utiliser que sur document, seul getElementsByTagName peut s'utiliser sur tous les noeuds
    Rédacteur "éclectique" (XML, Cours PHP, Cours JavaScript, IRC, Web...)
    Les Règles du Forum - Mon Site Web sur DVP.com (Développement Web, PHP, (X)HTML/CSS, SQL, XML, IRC)
    je ne répondrai à aucune question technique via MP, MSN ou Skype : les Forums sont là pour ça !!! Merci de me demander avant de m'ajouter à vos contacts sinon je bloque !
    pensez à la balise [ code ] (bouton #) et au tag :resolu: (en bas)

  6. #6
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    J'en suis la :

    document.getElementsById('TD_'+CatIDStr).className = "select";

    firefox me marque que la fonction document.getElementsById n'est pas une fonction.....



    EDIT : Avec le getElementByTagName ne pose pas de probleme, mais par contre l'effet de changement de classe via className ne fait rien :/

    document.getElementsByTagName('TD_'+CatIDStr).className = "select";

  7. #7
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    bon avec getElementByID ca marche quand je le clique, par contre quand cest la fonction de selection globale (qui check/decheck mes cases), ca plante sur la premiere :/

  8. #8
    Expert confirmé
    Avatar de Swoög
    Profil pro
    Inscrit en
    Janvier 2003
    Messages
    6 045
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Janvier 2003
    Messages : 6 045
    Par défaut
    alors, une faute que je fais aussi assez souvent :

    getElementsByName
    getElementsByTagName

    mais

    getElementById


    les deux premières renvoient un tableau
    Rédacteur "éclectique" (XML, Cours PHP, Cours JavaScript, IRC, Web...)
    Les Règles du Forum - Mon Site Web sur DVP.com (Développement Web, PHP, (X)HTML/CSS, SQL, XML, IRC)
    je ne répondrai à aucune question technique via MP, MSN ou Skype : les Forums sont là pour ça !!! Merci de me demander avant de m'ajouter à vos contacts sinon je bloque !
    pensez à la balise [ code ] (bouton #) et au tag :resolu: (en bas)

  9. #9
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    Fonction pour tout checker
    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
     
    function checkAll(elem, valeur)
    {
    //len = form.elements.length;
    //alert(document.form.liste.length);
    	for( var i=0 ; i < document.forms["form"].elements[elem].length ; i++) 
    	{
    		document.forms["form"].elements[elem][i].checked = valeur;
     
    		var nb = i;
     
    		//alert (nb);
    		TDColor(document.forms["form"].elements[elem][i], nb, 0);
    		//fnChange(nb,0);
        }
    }

    //Fonction pour changer la classe
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    function TDColor(case, CatIDStr, nb) {
     
    	//document.getElementsByTagName('TD_'+CatIDStr).className = "select";
    	alert(case.checked);
     
    	if(case.checked == true)
    		document.getElementById('TD_'+CatIDStr).className = "select";
     
    	else
    		document.getElementById('TD_'+CatIDStr).className = "unselect";
    }
    Code HTML/PHP
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    echo "<TD ID='codeorg_$i' class='left' >";
     echo "<input ID='CK_$i' onclick='TDColor(this, $i, $nb); fnChange($i,$nb);' type=checkbox name='liste'";
    ...
    <input type=checkbox name=check_all value=all OnClick=\"checkAll('liste', this.checked);\">


    Ca marche pas encore super, les classes changeant au hasard :/
    Et impossoble de revenir à l'ancien état.

  10. #10
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    De pire en pire, now firefox m'annonce que mes fonctions ne sont pas definies...

    ca devient galere a suivre ce bordel :/

  11. #11
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    Bon les fonction refonctionnent,e ne me reste qu'un souci

    dans TDColor :

    alert(document.forms["form"].elements["liste"][CatIDStr].checked);

    me renvoie toujours false, meme quand la zone est cochée.... Le CatIDStr est bien passé en parametre... mais au final la fonction recupere tjs false....

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    alert(CatIDStr + ' ' + document.forms["form"].elements["liste"][CatIDStr].checked);
     
    if(document.forms["form"].elements["liste"][CatIDStr].checked == true)
    		document.getElementById('TD_'+CatIDStr).className = "select";
    EDIT : en fait le false si je clique sur une box

    Si je clique sur la box qui permet de les cocher toutes, il maffiche le premier a true puis sarrete, si je reclicke, la par contre il me dit qu'elles sont toutes à false....
    Pourquoi la boucle marche dans un seul sens ?

    Apres test, il apparaitrait que ce serait le getElementbyID qui provoquerait la coupure...

    Firefox : Erreur : document.getElementById("TD_" + CatIDStr) has no properties

  12. #12
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    EN changeant un peu la fonction TDColor :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    function TDColor(CatIDStr) {
            var TObj = document.getElementById("TD_" + CatIDStr);
            if (TObj.className == "select")
            {
                    TObj.className = "unselect";
            }
            else
            {
                    TObj.className = "select";
            }
    }
    je gere correctement la couleur au cas par cas, mais la selection globale bloque apres le coche du premier element, cest le seul osuci qui me bloque encore :/

    Firefox : Erreur : TObj has no properties

  13. #13
    Membre éprouvé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2006
    Messages
    1 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

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

    Informations forums :
    Inscription : Avril 2006
    Messages : 1 627
    Par défaut
    C'est bon ca roule, le probleme du no property venbait dune mauvaise incrementation (dans jscript i demarre a zero, et dans php i demarre a 0 suivi de i++; Parfois la maintenance....)

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

Discussions similaires

  1. style .bst avec annotations et mise en valeur de certaines références
    Par tubaas dans le forum Bibliographies - Index - Glossaires
    Réponses: 0
    Dernier message: 25/08/2012, 10h31
  2. Renvoyer la valeur du lien cliqué avec JavaScript
    Par mesken dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 25/04/2012, 01h30
  3. [XL-2007] copie valeur cellule dans word avec mise en page
    Par lenul78570 dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 24/02/2010, 10h54
  4. [TinyMCE] Comment récupérer la valeur d'un textarea avec javascript ?
    Par rasdri dans le forum Bibliothèques & Frameworks
    Réponses: 5
    Dernier message: 29/11/2007, 19h53
  5. récupérer valeur d'un dropdownliste avec javascript
    Par Tyler Durden dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 18/07/2007, 21h47

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