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

**vwrx924** · 16/09/2017, 22h26

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

**NoSmoking** · 17/09/2017, 08h21

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 !

**vwrx924** · 17/09/2017, 17h52

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

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

**vwrx924** · 17/09/2017, 18h03

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

**vwrx924** · 17/09/2017, 19h46

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

**NoSmoking** · 18/09/2017, 14h59

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager