Discussion :

[serigne]

Bonjour,

Je dispose d'un tableau HTML avec dans les colonnes : un champ select et des input.
J'ajoute des lignes supplémentaires a un clik par clonage des mes champs au dessous.
Mon problème c'est que je veux quand je sélectionne un select a une ligne donnée, j'arrive a faire un appel ajax dans la base pour récupérer les valeurs des input de la même ligne ou se trouve le champ select qui a été sélectionné.

Mon soucis est comment identifier le champ input que je vais changer la valeur ?


NB: le champ select est charge a la suite d'une requête en base de données.

Code php :

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
<table  id="idtabaert">
 <td> <select name="facture_article" id="facture_article" class="myLists" onchange="rdecup(this);">
  <?php
 $reponse = $bdd_facture->query('SELECT Id_article, Designation FROM articles');
while ($donnees = $reponse->fetch())
{
	echo '<option value="'.$donnees['Id_article'].'">'.$donnees['Designation'].'</option>';
 
}
 
$reponse->closeCursor();					   
?>
</select> </td>
<td><input type="text" name="QT" id="QT" size="7" /></td>
<td><input type="text" name="PU" id="PU" size="15" /></td>
<td><input type="text" name="PT" id="PT" size="15" /></td>
  </tr>
</table>

je clone les chmaps par ce procede

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
function ajouterLigne()
  {
 var tableau = document.getElementById("idtabaert");
var ligne = tableau.insertRow(-1);//on a ajouté une lignetr
var colonne1 = ligne.insertCell(0);//on a une ajouté une celluletd
var newList = document.getElementById("facture_article").cloneNode(true);
newList.id = newList.id + tableau.rows.length;
newList.name = newList.name  + tableau.rows.length;
colonne1.appendChild(newList);
var colonne2 = ligne.insertCell(1);//on a une ajouté une celluletd
var newQT = document.getElementById("QT").cloneNode(true);
newQT.id = newQT.id + tableau.rows.length;
newQT.name = newQT.name  + tableau.rows.length;
colonne2.appendChild(newQT);
var colonne3 = ligne.insertCell(2);//on a une ajouté une celluletd
var newPU = document.getElementById("PU").cloneNode(true);
newPU.id = newPU.id + tableau.rows.length;
newPU.name = newPU.name  + tableau.rows.length;
colonne3.appendChild(newPU);
var colonne4 = ligne.insertCell(2);//on a une ajouté une celluletd
var newPT = document.getElementById("PT").cloneNode(true);
newPT.id = newPT.id + tableau.rows.length;
newPT.name = newPT.name  + tableau.rows.length;
colonne4.appendChild(newPT);
 }

Merci de vos idées ?

[01001111]

Primo: utiliser les tr (table row) pour y imbriquer les td (table division)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<table>
           <tbody>
                      <tr>
                               <td>
                               </td>
                               <td>
                               </td>
                      </tr>
           </tbody>
</table>

pour cibler la ligne, il faut parcourir le parentNode de l'élément sélectionné de façon récursive via une fonction appelée par l'évènement onchange du select, ce jusqu'à arriver au tr.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<select onchange="mafonction(event);"></select>

Pour ceci on vérifie la propriété tagName du parent en lui appliquant un toLowerCase(). La valeur doit être égale à "tr"
Enfin, depuis cet évènement, il faut cibler les enfants de tag input et de type text.
exemple:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function mafonction(event) {
          var elm=event.target;
          while (elm.tagName.toLowerCase()!=="tr") {
                    elm=elm.parentNode;
          }
          var inputs=elm.querySelectorAll("input[type=text]");
}