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

Version imprimable

Bonsoir,

sur ma page j'ai une table dynamique via PHP

Code:

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

17/09/2017, 08h21
NoSmoking
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:

1 2 oTD_Parent = oRadio.parentNode(); oTR_Parent = oTD_Parent.parentNode();
ou directement

Code:

oTR = oRadio.parentNode().parentNode();

• ensuite tu peux parcourir le contenu des cellules en utilisant la collection des cellules de oTR, par exemple
Code:

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 !

Citation:

Envoyé par NoSmoking

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 :oops:

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:

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:

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! :oops:
Merci

Ma fonction

Code:

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

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:

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:

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

Il te suffit de passer l'objet en paramètre pour le récupérer dans ta fonction.

Appel devient

Code:

<input type="radio" name="rchoix" id="rchoix" onclick="LigneSelect(this)"/>

on passe le « mot magique » this à la fonction et la fonction devient
Code:

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); } }

18/09/2017, 21h27
vwrx924

Citation:

Envoyé par NoSmoking

Il te suffit de passer l'objet en paramètre pour le récupérer dans ta fonction.

ok je comprends mieux maintenant l'usage de this que je pensai retrouver dans la function
merci beaucoup pour ton aide
cdlt