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 :

Table dynamique - radio select = comment récupérer les valeurs des cellules de la ligne?


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Lycéen
    Inscrit en
    Juin 2016
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Juin 2016
    Messages : 65
    Par défaut Table dynamique - radio select = comment récupérer les valeurs des cellules de la ligne?
    Bonsoir,

    sur ma page j'ai une table dynamique via PHP
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <tr valign="middle" id="lg" style="border-style:None; font-weight:normal;">
        <td>
            <input type="text" name="gvhdf" id="gvhdf" value="<?php echo stripslashes($row['demandotp_id']); ?>"/>
        </td>
        <td name="td1">
            <input type="radio" name="gvcbx" id="gvcbx" onclick="mafonction()"/>
        </td>
        <td align="center"><?php echo stripslashes(date("d-m-Y", strtotime($row['demand_dtcreat']))); ?></td>
        <td align="center" name="irsi" id="irsi"><?php echo stripslashes($row['IRSI']); ?></td>
        <td align="left"><?php echo stripslashes($row['nomsite']); ?></td>

    après click sur le radio, je cherche un moyen simple de récupérer les valeurs de la ligne correspondante au radio = checked après avoir modifié la couleur de la ligne en jaune,

    merci de votre aide

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    il aurait été sympa de nous mettre ce que contient ta fonction mafonction, si existe !

    Pour le principe :
    • il te faut remonter au parent <tr>, attendu que tu as une structure du type <tr><td><input> cela te fait remonter de deux niveaux.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    oTD_Parent = oRadio.parentNode();
    oTR_Parent = oTD_Parent.parentNode();
    ou directement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    oTR = oRadio.parentNode().parentNode();
    • ensuite tu peux parcourir le contenu des cellules en utilisant la collection des cellules de oTR, par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var oCellules = oTR.cells;
    var i;
    var nb = oCellules.length;
    for (i = 0; i < nb; i += 1) {
      console.log(oCellules[i].textContent);
    }
    Nota : je pense qu'une petite recherche sur le forum t'aurais donné une multitude de réponses
    Voir cette recherche !

  3. #3
    Membre confirmé
    Homme Profil pro
    Lycéen
    Inscrit en
    Juin 2016
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Juin 2016
    Messages : 65
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Bonjour,
    il aurait été sympa de nous mettre ce que contient ta fonction mafonction, si existe !
    je n'avais pas de code, ne sachant comment m'y prendre

    Nota : je pense qu'une petite recherche sur le forum t'aurais donné une multitude de réponses
    je t'avoue avoir chercher mais en tant que débutant je ne m'y retrouvais pas

    merci NoSmoking pour ta réponse,

    Je fais donc appel à ma fonction via l'input radio (ligne 3)
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <tr valign="middle" id="lg" style="border-style:None; font-weight:normal;">
           <td><input type="text" name="gvhdf" id="gvhdf" value="<?php echo stripslashes($row['demandotp_id']); ?>"/> </td>
           <td name="td1"><input type="radio" name="gvcbx" id="gvcbx" onclick="LigneSelect()"/></td>
           <td align="center"><?php echo stripslashes(date("d-m-Y", strtotime($row['demand_dtcreat']))); ?></td>
           <td align="center" name="irsi" id="irsi"><?php echo stripslashes($row['IRSI']); ?></td>
           <td align="left"><?php echo stripslashes($row['nomsite']); ?></td>

    Ma fonction
    Code HTML : 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
     <head>
                <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!--obligatoire sur chaque page-->
                <link rel="stylesheet" href="design.css"/>
                <title>titre</title>
     
                <script type="text/javascript">
                    function LigneSelect(){
                        oTD_Parent = oRadio.parentNode();
                        oTR_Parent = oTD_Parent.parentNode();
                        var oCellules = oTR.cells;
                        var i;
                        var nb = oCellules.length;
                        for (i = 0; i < nb; i += 1) {
                            console.log(oCellules[i].textContent);
                        }
                    }
                </script>   
            </head>

    MAIS lorsque j'active ma page et que je clique sur un input radio il ne se passe rien,
    une erreur de débutant je suppose!
    Merci

  4. #4
    Membre confirmé
    Homme Profil pro
    Lycéen
    Inscrit en
    Juin 2016
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Juin 2016
    Messages : 65
    Par défaut
    Ma fonction
    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
     <head>
                <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!--obligatoire sur chaque page-->
                <link rel="stylesheet" href="design.css"/>
                <title>titre</title>
    
                <script type="text/javascript">
                    function LigneSelect(){
                        oTD_Parent = oRadio.parentNode();
                        oTR_Parent = oTD_Parent.parentNode();
                        var oCellules = oTR_Parent.cells;
                        var i;
                        var nb = oCellules.length;
                        for (i = 0; i < nb; i += 1) {
                            console.log(oCellules[i].textContent);
                        }
                    }
                </script>   
            </head>
    je m'en rend compte maintenant - oRadio n'est pas définit dans mon code - c'est peut-être pour cela qu'il ne se passe rien?
    comment je fais pour définir oRadio?

    j'ai enlevé la coquille de mon code oTR.cells également

    merci

  5. #5
    Membre confirmé
    Homme Profil pro
    Lycéen
    Inscrit en
    Juin 2016
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Juin 2016
    Messages : 65
    Par défaut
    Bon finalement à force de recherches voilà mon code suite récupératino de bouts de code par ci par là!!
    ça fonctionne mais je ne sais pas vraiment si les pro auraient faits de même?

    Ma table
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <form method="post" name="formulaire" id="enq" action="Pg02_Workflow.php">
         <table cellspacing="0" align="Center" rules="all" border="1" id="tbl" style="width:100%;border-collapse:collapse;">
                   <tr valign="middle" id="lg" style="border-style:None; font-weight:normal;">
                        <td>
                             <input type="hidden" name="demandid" value="<?php echo stripslashes($row['demandotp_id']); ?>"/>
                             <input type="hidden" name="demandstatut" value="<?php echo stripslashes($row['demand_statut']); ?>"/> // car je n'arrive pas à récupérer la valeur du dernier td ci-dessous avec ma fonction
                             <input type="radio" name="rchoix" id="rchoix" onclick="LigneSelect()"/> //appel de ma fonction
                        </td>
                        <td align="center"><?php echo stripslashes(date("d-m-Y", strtotime($row['demand_dtcreat']))); ?></td>
                        <td align="center"><?php echo stripslashes($row['demand_statut']); ?></td>
                        etc...

    Ma fonction
    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
    28
    29
     
    <script type="text/javascript">
         function LigneSelect(){
              var Sel_lign = '';
              var Sel_id = '';
              var Sel_stat = '';
              for (i=0; i<document.formulaire.rchoix.length; i++) {
                   if (document.formulaire.rchoix[i].checked) {
                        Sel_lign = i
                        Sel_id = document.formulaire.demandid[i].value;
                        Sel_stat = document.formulaire.demandstatut[i].value;
                   }
              }
     
              var arrayLignes = document.getElementById("tbl").rows; //l'array est stocké dans une variable
              var longueur = arrayLignes.length;//on peut donc appliquer la propriété length
              var i=0; //on définit un incrémenteur qui représentera la clé
              while(i<longueur) {
                     if (i == Sel_lign+1){
                        arrayLignes[i].style.backgroundColor = "#ffff99";
                     }
                     else { 
                        arrayLignes[i].style.backgroundColor = "#ffffff";
                     }
                     i++;
              }
              alert(Sel_lign + ' a été sélectionné ' + 'id='+ Sel_id + ' stat=' + Sel_stat);
        }
      </script>
    Merci

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Il te suffit de passer l'objet en paramètre pour le récupérer dans ta fonction.

    Appel devient
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="radio" name="rchoix" id="rchoix" onclick="LigneSelect(this)"/>
    on passe le « mot magique » this à la fonction et la fonction devient
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function LigneSelect(param) {
      var oRadio = param;
      var oTR = oRadio.parentNode().parentNode();
      var oCellules = oTR.cells;
      var i;
      var nb = oCellules.length;
      for (i = 0; i < nb; i += 1) {
        console.log(oCellules[i].textContent);
      }
    }

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

Discussions similaires

  1. Réponses: 1
    Dernier message: 11/09/2013, 10h44
  2. Réponses: 6
    Dernier message: 21/12/2009, 11h08
  3. Réponses: 2
    Dernier message: 06/01/2009, 22h43
  4. Gridview: Comment récupérer les valeurs des deux clés?
    Par Thomas_Laurent dans le forum ASP.NET
    Réponses: 1
    Dernier message: 02/02/2007, 14h54
  5. Réponses: 2
    Dernier message: 11/12/2006, 12h38

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