Déclencher un événement change à chaque ligne d'un tableau

Version imprimable

Bonjour,
j'ai un tableau html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<table id="tableau">
		<th>Prenom</th>
		<th>Nom</th>
		<th>Situation de famille</th>
		<th>Grade</th>
		<th>Fonction</th>
		<th>Direction</th>
 
 
 
</table>
<input type="button" onclick="ajouteLigne('tableau')" value="Ajouter agent"/>

je crée une ligne avec une cellule select à chaque clique sur le bouton et je veux créer une autre cellule sur la même ligne des que je choisis une valeur sur le champ select

le code JS

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
function ajouteLigne(tableID)
{
	var table = document.getElementById(tableID);
	var ligne = table.insertRow(-1);
    var rowNumber = table.childNodes.length;
    var cell_prenom = ligne.insertCell(0);
	var cell_nom = ligne.insertCell(1);
 
	    var codeHTML_prenom= '<select id="prenom_ag[]" ><option value="-1">Choisir prenom</option>';
		var code_HTML_nom='<input id="test"/>';
	 <?php
	   include('functions.php');
        $bdd_mission_msas=connect();
		$reponse_prenom = $bdd_mission_msas->query('SELECT * FROM  agent');
		 $optionsHTML_prenom="";				
		while ($donnees_prenom = $reponse_prenom->fetch())
{
	$optionsHTML_prenom.='<option value="'.$donnees_prenom ['agent_id'].'">'.$donnees_prenom ['prenom'].'</option>';
}
 
$reponse_prenom->closeCursor();
 
?>
codeHTML_prenom+='<?php echo $optionsHTML_prenom ."</select>"; ?>';
cell_prenom.innerHTML=codeHTML_prenom;
 
 
document.getElementById('prenom_ag[]').addEventListener('change', function(e){
	cell_nom.innerHTML=code_HTML_nom;
 
 
}
 // ici le code lorsque le prénom change
);
 
}
 
 
 
 
 
        $( window ).load( function(){
 
        });
 
 
 
 
    </script>

Le problème est que l’événement ne se déclenche que sur la première ligne?
Comment faire pour qu'il se déclenche à chaque ligne?

03/12/2019, 18h55
NoSmoking

Bonjour,
un mélange incroyable de JavaScript et PHP !!!!

Une ID doit être unique ce qui n'a pas l'air d'être le cas lors d'un ajout.

Lorsque tu ajoutes un élément au DOM il te faut également ajouter l'écouteur d'événement car il ne peut pas l'inventer, mais dans ton cas tu ne crées pas d'élément tu l'injectes via un innerHTML.

Tu peux gérer directement l'événement dans la balise avec l'attribut onchange.

Une autre solution est de mettre l'écouteur sur le parent le plus proche qui existe dans ton document au départ.

Bonjour,
Finalement ça marche, j'ai utilise l’événement onchange sur le champ select et déclare ma variable ligne comme globale
voici le code

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<script>
        "use strict";
	var ligne ;	
var code_HTML_nom;	
 
function ajouteLigne(tableID)
{
	var table = document.getElementById(tableID);
	ligne= table.insertRow(-1);
    var rowNumber = table.childNodes.length;
    var cell_prenom = ligne.insertCell(0);
 
 
 
 
	    var codeHTML_prenom= '<select id="prenom_ag[]" onchange="charger_champ(this.value)" ><option value="-1">Choisir prenom</option>';
 
 
		code_HTML_nom='<input id="test"/>';
	 <?php
	   include('functions.php');
        $bdd_mission_msas=connect();
		$reponse_prenom = $bdd_mission_msas->query('SELECT * FROM  agent');
		 $optionsHTML_prenom="";				
		while ($donnees_prenom = $reponse_prenom->fetch())
{
	$optionsHTML_prenom.='<option value="'.$donnees_prenom ['agent_id'].'">'.$donnees_prenom ['prenom'].'</option>';
}
 
$reponse_prenom->closeCursor();
 
?>
codeHTML_prenom+='<?php echo $optionsHTML_prenom ."</select>"; ?>';
cell_prenom.innerHTML=codeHTML_prenom;
 
 
 
 
}
 
function charger_champ(val)
{
	var cell_nom = ligne.insertCell(1);
cell_nom.innerHTML=code_HTML_nom;
 
}
 
 
 
 
 
        $( window ).load( function(){
 
        });
 
 
 
 
 
 
    </script>