Discussion :

[jmtrivia]

Bonjour à toutes et tous, je remercie d'avance celui ou celle qui se penchera sur ma question (débutant total en JS/JQUERY). Voici l'extrait de code de ma page

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="row">
			<table class="form-table" id="Effectif">
				<thead>
					<tr>
						<th scope="col">#</th>
						<th scope="col">Nom</th>
						<th scope="col">Poste</th>
						<th scope="col">Entr&eacute;(e) en</th>
						<th scope="col">Salaire annuel brut</th>
						<th scope="col">Contrat et dur&eacute;e</th>
						<th scope="col"></th>
					</tr>
				</thead>
				<tbody>
					<?php foreach($salaries as $salarie): ?>
					<tr>
						<td class="col-sm-1"><input type="text" id="Effectif" class="form-control form-control-sm" name="ordre[]" value="<?= ($action==2 ? $salarie['ordre'] : '' ); ?>"></td>
						<td ><input type="text" id="Effectif" class="form-control form-control-sm" name="nom[]" value="<?= ($action==2 ? $salarie['nom']: '' ); ?>"></td>
						<td ><input type="text" id="Effectif" class="form-control form-control-sm" name="poste[]" value="<?= ($action==2 ? $salarie['poste']: '' ); ?>"></td>
						<td ><input type="text" id="Effectif" class="form-control form-control-sm" name="anciennete[]" value="<?= ($action==2 ? $salarie['date_entree']: '' ); ?>"></td>
						<td ><input type="text" id="Effectif" class="form-control form-control-sm" name="salaire[]" value="<?= ($action==2 ? $salarie['salaire']: '' ); ?>"></td>
						<td><input type="text" id="Effectif" class="form-control form-control-sm" name="contrat[]" value="<?= ($action==2 ? $salarie['contrat']: '' ); ?>"></td>
						<td><a href="javascript:void(0);" class="rem_effectif"><i class="fa fa-minus-square" ></i></a></td>
					</tr>
					<?php endforeach; ?>
					<tr>
						<td class="col-sm-1"><input type="text" id="Effectif" class="form-control form-control-sm" name="ordre[]"></td>
						<td><input type="text" id="Effectif" class="form-control form-control-sm" name="nom[]"></td>
						<td><input type="text" id="Effectif" class="form-control form-control-sm" name="poste[]"></td>
						<td><input type="text" id="Effectif" class="form-control form-control-sm" name="anciennete[]"></td>
						<td><input type="text" id="Effectif" class="form-control form-control-sm" name="salaire[]"></td>
						<td><input type="text" id="Effectif" class="form-control form-control-sm" name="contrat[]"></td>
						<td><a href="javascript:void(0);" class="add_effectif"><i class="fa fa-plus-square" ></i></a></td>
					</tr>
				</tbody>
			</table>
			<script>
                        $(document).ready(function() {
                                $(".add_effectif").click(function(){
                                        markup = '<tr><td class="col-sm-1"><input type="text" id="Effectif" class="form-control form-control-sm" name="ordre[]"></td>'
                                        +'<td><input type="text" id="Effectif" class="form-control form-control-sm" name="nom[]"></td>'
                                        +'<td><input type="text" id="Effectif" class="form-control form-control-sm" name="poste[]"></td>'
                                        +'<td><input type="text" id="Effectif" class="form-control form-control-sm" name="anciennete[]"></td>'
                                        +'<td><input type="text" id="Effectif" class="form-control form-control-sm" name="salaire[]"></td>'
                                        +'<td><input type="text" id="Effectif" class="form-control form-control-sm" name="contrat[]"></td>'
                                        +'<td><a href="javascript:void(0);" class="rem_effectif"><i class="fa fa-minus-square" ></i></a></td></tr>'
                                        $("#Effectif").append(markup);
                                });
                                $("#Effectif").on('click','.rem_effectif',function(){
                                        $(this).parent().parent().remove();
                                });
                        });
                        </script>
		</div>	
		<br />
		<div class="row">
			<input type="hidden" name="id" value="<?= $_GET['id']; ?>">
			<button class="btn btn-sm btn-primary btn-block" type="submit" name="enregistrerRH">Valider</button>
		</div>
		</form>

Lorsque j'ajoute une ligne à ma table #Effectif, celle-ci vient se placer après le bouton "enregistrerRH" ? au lieu d'être ajouté "juste" en fin de table...Que dois je faire pour remédier à ce problème ?

[jmtrivia]

Ouupps, j'ai trouvé ;-)

[ProgElecT]

Super sympa de partager la solution

[Toufik83]

Bonjour,

Je suppose aussi que tu as supprimé les id identiques, vu que tu utilisais les mêmes pour la <table id="Effectif"> et les <td id="Effectif"> et ça ce n'est pas bon, car un id devrait être unique dans une page html...