Discussion :

[Goffer]

Bonjour à tous,

Etant débutant javascript, j'ai besoin d'aide pour comprendre comment faire pour ajouter / retirer une ligne d'un tableau html en javascript et surtout afficher un bouton retirer dans la dernière colonne du tableau lorsque la ligne n'est pas la dernière ligne du tableau.

Pouvez-vous m'aider svp ?

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
<table id='instanceTable'>
		<tr>
			<td>Header 1
			</td>
			<td>
				Actions
			</td>
		</tr>
</table>
 
<script type='text/javascript'>
$('#add_row').click(function(event) {
$('<tr>'
		+'<td>Column 1</td>'
		+'Si dernière ligne du tableau <button id=add_row>Ajouter</button>
		+'Sinon	<button id=rem_row>Retirer</button>'
   +'</tr>').appendTo('#instanceTable');
});
</script>

Merci d'avance

[Auteur]

bonjour,

voici un exemple (message n°2 de la discussion) qui répondra à ta question :
http://www.developpez.net/forums/d33...ligne-tableau/

[Goffer]

Bonjour et merci Auteur,

J'ai réussi à faire quelque chose de pas trop mal en partant d'abord des informations que tu m'as donné, et par la suite avec jquery.

Ce que j'aimerais faire : j'ajoute une ligne de tableau, la dernière colonne contient les boutons pour ajouter / retirer une nouvelle ligne=> Cela fonctionne pour la première ligne mais pas pour les autres.

Voici mon code :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript" src="jquery.min.js"></script>
<table id="table">
	<tbody>
		<tr>
			<th> Label</th>
			<th> Actions </th>
		</tr>
		<tr>
			<td><div class="input select">
				<select name="label" id="combobox">
					<option value="1">Option 1</option>
					<option value="2">Option 2</option>
				</select>
				</div>
			</td>
			<td>
				<a class="del_row" id="">Del</a>
				<a class="add_row" id="">Add</a>
			</td>
		</tr>
	</tbody>
</table>
<script type="text/javascript">
$('table td a.del_row').click(function(){
	event.preventDefault();
	$(this).parent().parent().remove();
});
$('table td a.add_row').click(function(){
	$(this).parent().parent().after('<tr><td><div class="input select">'
				+'<select name="label" id="combobox">'
				+'	<option value="1">Option 1</option>'
				+'	<option value="2">Option 2</option>'
				+'</select>'
			+	'</div>'
			+	'</td>'
			+'<td>'
			+	'<a class="del_row" id="">Del</a>'
			+'<a class="add_row" id="">Add</a>'
			+'</td></tr>');
});
</script>

Un petit coup de main svp ? J'y suis presque

[Auteur]

Un petit coup de main svp ? J'y suis presque

jquery et moi ça fait deux


Le symptôme que tu décris laisse à penser que tu ne donnes pas à la fonction de suppression l'objet à supprimer.

Dans mon code et la fonction ajoutLigne(), j'ai

Code :

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

1
2
3
var ligne = tableau.insertRow(-1); // création d'une ligne
// suite du code...
bouton.onclick = function(){suppression(ligne)};// objet transmis à la fonction de suppression

et dans la fonction de suppression :

Code :

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

1
2
3
4
5
function suppression(ligne)
{
  document.getElementById('tableau').deleteRow(ligne.rowIndex);
 
// suite du code...

tu es obligé de passer par JQuery ?

[Goffer]

J'ai compris d'où venait mon soucis. Il fallait passer la fonction en argument de la fonction "live" (http://api.jquery.com/live/) :

Code :

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

1
2
 
$('table td a.add_row').live('click', function(){

au lieu de :

Code :

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

$('table td a.add_row').click(function(){

Le problème est donc résolue

Auteur, je préfère utiliser jquery qui simplifie énormément le travail pour un noob du javascript comme moi. Je trouve que c'est plus simple à utiliser merci pour ton aide en tout cas !

[Auteur]

Auteur, je préfère utiliser jquery qui simplifie énormément le travail pour un noob du javascript comme moi. Je trouve que c'est plus simple à utiliser merci pour ton aide en tout cas !

Ne perds pas de vue que JQuery est du javascript. Je te conseille de ne pas céder à la facilité et de voir les bases javascript car ces bases te seront toujours utiles.
Réserve les libraires pour réaliser des choses plus complexes car à force d'utiliser des librairies "pour te faciliter la vie" tu vas finir par utiliser JQuery seulement pour un document.getElementById(), ce qui serait vraiment sans intérêt.