Jquery & tableau dynamique

**Ophiucus02** · 03/05/2015, 11h12

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 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
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.

**mathieu** · 04/05/2015, 14h09

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

**danielhagnoul** · 04/05/2015, 23h28

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

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

Jquery & tableau dynamique

jQuery

Discussions similaires

Partager

Partager