11548 sujets

JavaScript, DOM et API Web HTML5

[résolu]Jquery : Ajouter des lignes automatiquement à un tableau

Bonjour,

Je souhaite réaliser un tableau HTML contenant un formulaire. Sa particularité est l'ajout automatique de lignes lorsqu'on atteint la fin du tableau.

Ce système permettra au final à l'utilisateur d'ajouter autant d'enregistrements qu'il le souhaite dans la base de données, et ce sur une même page.

Le problème c'est que jquery, ou le javascript plus généralement, semble incapable de manipuler des éléments qu'il a creé lui même aprés le chargement de la page.

Mon tableau commence avec 3 lignes , si je clique sur la troisième une 4eme apparait. Mais la mehode jquery considère toujours la 3eme ligne comme la dernière, alors qu'il y en a 4 maintenant.

Voici le code simplifié qui me pose problème et le lien vers la page de test 



<table id="tableau">

<tr>
	<td><input type="text" /></td>
	<td><input type="text" /></td>
	<td><input type="text" /></td>
</tr>
<tr>
	<td><input type="text" /></td>
	<td><input type="text" /></td>
	<td><input type="text" /></td>
</tr>
<tr>
	<td><input type="text" value="click ici" /></td>
	<td><input type="text" /></td>
	<td><input type="text" /></td>
</tr>
</table>

<div id="result"></div>

<script>

var nbligne = 3

$(document).ready(function() {
	

	// On affiche le nombre de lignes
	$("#result").html("nb ligne = " + nbligne);

	//On ajoute une ligne si on clique sur la derniere ligne du tableau
	$("tr:last").click(function() {
		$(this).clone().insertAfter(this);
		nbligne = nbligne + 1;
		$("#result").html("nb ligne = " + nbligne);
	});

});

</script>


Merci pour votre aide
Modifié par julienj (10 Feb 2008 - 17:16)
Bonjour,

En fait, $("tr:last") n'est évalué qu'une fois, et correspond donc forcément à la dernière ligne du tableau au moment ou tu exécutes ce code.

Je pense qu'il faut que tu gères toi-même le fait d'enlever le gestionnaire d'événement sur l'ex première ligne et de l'ajouter sur la nouvelle.
Merci julien,

J'ai trouvé une solution qui fonctionne.

la voici :

<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>

<style type="text/css" media="all">
#tableau td{
border:solid 1px;

}

</style>

</head>
<body>


<table id="tableau">

</table>

<div id="result"></div>

<script>

	var nbligne = 1;

	function nouvelleligne(nbligne){

		return '<tr name="'+ nbligne +'" onclick="ajouterligne($(this));">' +
				'<td>'+ nbligne +'</td>' +
				'<td><input type="text" /></td>' +
				'<td><input type="text" /></td>' +
				'<td><input type="text" /></td>' +
			'</tr>';
	}
	
	// on creé la première ligne
		var nouvelle_ligne = nouvelleligne(nbligne);
		$(nouvelle_ligne).prependTo("#tableau");

	// On affiche le nombre de ligne
	$("#result").html("nb ligne = " + nbligne);


	function ajouterligne(ligne){

		// Si c'est la derière ligne	
		if(ligne.attr('name') == nbligne){
		
			// On insert la nouvelle ligne
			nbligne ++;
			var nouvelle_ligne = nouvelleligne(nbligne);
			$(nouvelle_ligne).insertAfter(ligne);
		
			// on change la variable nbligne et on l'affiche 
			$("#result").html("nb ligne = " + nbligne);
		}
	}

</script>

</body>
</html>
Sujet clos
Aller à