Jquery & tableau dynamique

Version imprimable

Bonjour,

J'aurais besoin de votre aide concernant une utilisation de Jquery associé à un tableau qui se construit dynamiquement.
Je m'explique : j'ai un tableau dont les lignes sont ajoutées en javascript en fonction des besoins des utilisateurs et dans chaque ligne j'ai un champ qui se remplit automatiquement en fonction d'une liste déroulante.
Or le programme ne fonctionne que sur la première ligne du tableau et pas sur les suivantes. Comment faire , Merci

Voici mon 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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script type="text/javascript">
                        $(document).ready(function () {
                                $(".liste").change(function(){
                                        var nom=$(this).attr('name');
                                        alert(nom);
                                });
                        });
                </script>
		<script type="text/javascript">
                        var i=1;
            function ajoute() {
                var newRow=document.createElement('tr');
                                newRow.innerHTML='<td><select name="champ1_'+i+'" class="liste"><option value="0"></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></td>';
                                newRow.innerHTML+='<td style="text-align:center;"><input type="text" name="champ2_'+i+'" size="5" maxlength="5" style="text-align:center;" /></td>';
                                newRow.innerHTML+='<td><input type="button" value="+" onClick="ajoute()" />&nbsp;<input type="button" value="-" onclick="retire(this.parentNode)"></td>';
                                document.getElementById('tableau').appendChild(newRow);
                                i++;
            }
            function retire(element) {
                document.getElementById('tableau').removeChild(element.parentNode);
                i--;
            }
        </script>
	</head>
	<body>
		<section>
			<table id='tableau'>
				<tbody>
					<tr>
						<td><select name="champ1_0" class="liste"><option value="0"></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></td>
						<td style="text-align:center;"><input type="text" name="champ2_0" size="5" maxlength="5" style="text-align:center;" /></td>
						<td><input type="button" value="+" onClick="ajoute()" /></td>
					</tr>
				</tbody>
			</table>
		</section>
	</body>
</html>

Merci de votre aide.

04/05/2015, 14h09
mathieu

Citation:

Envoyé par Ophiucus02

Or le programme ne fonctionne que sur la première ligne du tableau et pas sur les suivantes.

je n'ai pas compris ce qui ne fonctionne pas, les boutons + et - fonctionnent bien

déjà une remarque, ne fais pas "i--" à la suppression d'une ligne sinon plusieurs lignes peuvent avoir le même numéros
si par exemple tu ajoutes 4 lignes, tu supprimes la 1re ligne et ensuite tu en rajoutes une, les 2 dernières lignes auront le même numéro

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<section>
    <table id='tableau'>
        <tbody>
            <tr>
                <td>
                    <select name="champ1_0" class="liste">
                        <option value="0"></option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="champ2_0" size="5" maxlength="5">
                </td>
                <td>
                    <button class="ajoute">+</button>
                </td>
            </tr>
        </tbody>
    </table>
</section>

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var n = 1,
        jObjTableau =  $( "#tableau" );
 
    jObjTableau.on( "click", ".ajoute", function(){
        var newRow = $( "<tr></tr>" );
 
        newRow.html( '<td><select name="champ1_' + n + '" class="liste">' +
            '<option value="0"></option>' +
            '<option value="A">A</option>' +
            '<option value="B">B</option>' +
            '<option value="C">C</option>' +
            '<option value="D">D</option>' +
            '</select></td>' +
            '<td style="text-align:center;">' +
            '<input type="text" name="champ2_' + n + '" size="5" maxlength="5"></td>' +
            '<td><button class="ajoute">+</button></td>' +
            '<td><button class="retire">-</button></td>' );
 
        $( "#tableau" ).children( "tbody" ).append( newRow );
 
        n++
    });
 
    jObjTableau.on( "click", ".retire", function(){
        $( this ).parents( "tr" ).remove();
    });
 
    jObjTableau.on( "change", ".liste", function(){
        console.log( this.name );
    });
});