[js] inserer un tableau dynamique

Sujet résolu

1 avril 2009 à 13:38:05

Salut les amis Zéros,

Bon je veux créer un tableau, les lignes de tableau seront en fonction du choix de l'utilisateur .

je veux que je supprime les tr du tableau à chaque recreation sans modifier sa structure .

Voici mon code

<p>
		Combiens de joueurs ? : 
		<select id="maliste" onchange="ajoutlignes();">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select>
	</p>
	<p>
		<table id="tabljoueur" border="3">
			<th>
				<td>Numéro</td>
				<td>Nom</td>
				<td>Pays</td>
				<td>Catégorie</td>
			</th>
		</table>
	</p>

function ajoutlignes()
{
	var nbr2row = document.getElementById("maliste").value;
	var parentNode =  document.getElementById("tabljoueur");
	
	//var leslignes=parentNode.childNodes("tr");
	
	//parentNode.removeChild(leslignes);
	
	for (var i = 0 ; i<nbr2row ; i++)
	{
		var myrow = document.createElement("tr");
		
		var mycell1 = document.createElement("td");
		var mycell2 = document.createElement("td");
		var mycell3 = document.createElement("td");
		var mycell4 = document.createElement("td");
		
		var numero =document.createTextNode(i+1);
		
		var nomjoueur = document.createElement("input");
		nomjoueur.setAttribute("type","text");
		nomjoueur.id="nom_"+(i+1);
		
		var paysjoueur = document.createElement("input");
		paysjoueur.setAttribute("type","text");
		paysjoueur.id="pays_"+(i+1);
		
		var catjoueur = document.createElement("input");
		catjoueur.setAttribute("type","text");
		catjoueur.id="cat_"+(i+1);
		
		mycell1.appendChild(numero);
		mycell2.appendChild(nomjoueur);
		mycell3.appendChild(paysjoueur);
		mycell4.appendChild(catjoueur);
		
		myrow.appendChild(mycell1);
		myrow.appendChild(mycell2);
		myrow.appendChild(mycell3);
		myrow.appendChild(mycell4);
		
		parentNode.appendChild(myrow);
	}
}

Merci d'avance

Noobs_

2 avril 2009 à 13:12:38

Même les lignes ils sont décalées

xavierm02

2 avril 2009 à 13:14:54

Citation : Noobs_

je veux que je supprime les tr du tableau à chaque recreation sans modifier sa structure .

T'as pas de tr >_<

Et si tu veux pas les supprimer..; pourquoi tu ne modifies pas juste leur contenu ?

birdy42

2 avril 2009 à 13:18:23

Salut,
Il a des tr créées avec JS... et il veut pouvoir changer le nombre de lignes... donc il peut pas "juste" modifier le contenu...

xavierm02

2 avril 2009 à 13:21:29

Bon.. c'est pas beau... c'est fait à l'arrache... mais ça évite de réfléchir (et en tant que partisan du moindre effort, ça me convient):

parentNode.innerHTML='';

Voilà

Si tu veux faire beau et bien codé, tu peux faire quelques if en ayant stocké la valeur du nombre de joueurs précédente.
Et tu rajoutes/enlèves ce qui manque ou est en trop... avec des removeNode().

Vas lire ce post.

birdy42

2 avril 2009 à 13:25:28

Oui ... en fait, c'est possible de faire maintenant :
parentNode.innerHTML= myrow; ?
Ou complètement faux ?

Noobs_

2 avril 2009 à 13:37:49

nn je peux pas faire un innerHTML vue que la structure de mon tableau va changer mes <th> je veux les gardés .
Autre chose mes lignes sont décalés par rapport au <th>

xavierm02

2 avril 2009 à 13:47:59

parentNode.getElementByTagName('th')[0].innerHTML='';

Golmote

2 avril 2009 à 14:06:03

Citation : birdy42

Oui ... en fait, c'est possible de faire maintenant :
parentNode.innerHTML= myrow; ?
Ou complètement faux ?

Complètement faux je crois ^^.

innerHTML doit prendre une chaîne de caractère, pas un objet.

Pour insérer c'est parentNode.appendChild(myrow); (mais ça ne supprime pas les noeuds fils existants de parentNode..

birdy42

2 avril 2009 à 14:11:47

ah bah oui, j'y avais pas pensé...
Le problème avec appendChild c'est que l'ancien contenu restera lui aussi... donc pas moyen d'avoir le nombre de lignes voulu...
Mais c'est presque plus simple d'écrire directement le code plutôt que de créer les noeuds avec DOM...

Noobs_

2 avril 2009 à 14:35:04

Oui Golmote l'ancien contenu reste
mais ça ne donnera pas de dynamité à mon tableau

Il faut que les seul les <th> qui restent et les lignes changent selon le choix de l user

Sans oublier qu'il y'a un problème dans le code que j'ai fournis c'est que les cellules sont déclés par rapport au cellules de mon <th>

restimel

2 avril 2009 à 14:35:36

en fait il y a plusieurs problèmes dans le code.

1/ <th> s'utilise à la place des <td> et non pas à la place des <tr>
Ce qui fait que lorsque tu ajoutes tes lignes il y a ce décalage horizontal

2/ ensuite lorsque tu écrits tes lignes elles ne sont pas directement dans les balises <table></table> mais dans les balises <tbody></tbody> (qui est, elle, dans les balises <table></table>) ce qui provoque un décalage vertical entre ta zone de titre et tes lignes

donc avec ces corrections ça pourrait donner quelque chose comme:

<table border="3">
	<tbody id="tabljoueur">
		<tr>
			<th>Numéro</th>
			<th>Nom</th>
			<th>Pays</th>
			<th>Catégorie</th>
		</tr>
	</tbody>
</table>

function ajoutlignes()
{
	var nbr2row = document.getElementById("maliste").value;
	var parentNode =  document.getElementById("tabljoueur");
	
	//var leslignes=parentNode.childNodes("tr");

	//parentNode.removeChild(leslignes);
	for (var i = 0 ; i<5 ; i++){//le 5 correspond au nombre max que tu as mis dans ton select
		var row=document.getElementById("row_"+(i+1));
		if(row){
			parentNode.removeChild(row);
		}
	}
	
	for (var i = 0 ; i<nbr2row ; i++)
	{
		var myrow = document.createElement("tr");
		myrow.id="row_"+(i+1);
		(...)

Noobs_

2 avril 2009 à 16:32:54

oui restimel t'as raison j'avais pas fait attention à l'emplacement de mes <th>

mnt ça fonctionne bien

Toutefois y'a un soucis , c'est quand l'utilisateur fait plusieurs choix y'a un espace blanc entre la ligne header et les autres lignes
ce qui n'est pas bien :-°

voici un lien http://nonjeteste.ifrance.com/joueur.html pour voir ce que je veux dire , penser à changer le nombre de joueur pls fois

restimel

2 avril 2009 à 17:50:52

Il s'agit de mon point 2/ (ce que j'ai appelé décalage vertical)

En fait toi quand tu ajoutes tes <tr> avec le javascript tu les ajoutes à l'élément <table>
Alors que le navigateur ajoute les <tr> que tu créé dans le HTML à l'élément <tbody> qui est dans l'élément <table>

d'où ma modif dans le HTML (qui sert à le préciser explicitement au lieu qu'il soit appelé de manière implicite):

Citation : restimel

<table border="3">
	<tbody id="tabljoueur">
		<tr>
			<th>Numéro</th>
			<th>Nom</th>
			<th>Pays</th>
			<th>Catégorie</th>
		</tr>
	</tbody>
</table>

A noter que j'ai changé le id de place (je l'ai mis sur le tbody donc si ton id (sur la table) te sers aussi à autre chose, il faudra créer un nouvel id) pour que les éléments se créent dans le tbody sans que tu n'aies besoin de changer le javascript.

En réalité, je ne sais pas vraiment pourquoi ce décalage se créé. C'est comme s'il gardait en mémoire l'élément qui vient d'être supprimé mais lui donne une hauteur quasi nulle. Donc si quelqu'un pouvait m'expliquer, ça m'intéresse.
Quand on déclare tout dans un tbody ça marche (ou qu'on sépare le head dans un thead et qu'on rajoute les lignes dans un tbody ça marche aussi).
Sans doute un problème de définition de DOM (car je repère ce problème sur plusieurs navigateurs)

EDIT: En réfléchissant au problème, je me demande si le fait d'ajouter des tr dans le table ne créé pas un tbody implicite (qui n'apparaît même pas dans le dom) pour chaque tr
ainsi quand on supprime un tr, on ne supprime pas ce tbody. Ce qui à force créé ces lignes vides.
Si quelqu'un peut confirmer ou infirmer...

Noobs_

2 avril 2009 à 21:46:02

Oui restimel ta raison ça marche très bien quand je met le <tbody>
toutefois comme t'as dit le problème reste un peux incompréhensible

Merci

Timot

2 avril 2009 à 23:05:13

Non, très compréhensible, comme tu l'as dit, on ne peux pas rajouter de tr dans une table comme ça, la ligne est par défaut rajouté dans le tbody. Donc en effet, je pense qu'il en créé un a chaque fois ce qui explique ce décalage.
Donc, en bref, apprenez a faire des tableaux en xHTML !

Noobs_

2 avril 2009 à 23:32:58

Oui merci les amis pour votre aide

mnt on va parlez coté optimisation de la fonction

function ajoutlignes()
{
	var nbr2row = document.getElementById("maliste").value;
	var parentNode =  document.getElementById("tabljoueur");

	for (var i = 0 ; i<5 ; i++){
		var row=document.getElementById("row_"+(i+1));
		if(row){
			parentNode.removeChild(row);
		}
	}

	for (var i = 0 ; i<nbr2row ; i++)
	{
		var myrow = document.createElement("tr");
		myrow.id="row_"+(i+1);

		var mycell1 = document.createElement("td");
		var mycell2 = document.createElement("td");
		var mycell3 = document.createElement("td");
		var mycell4 = document.createElement("td");
		
		var numero =document.createTextNode(i+1);
		
		var nomjoueur = document.createElement("input");
		nomjoueur.setAttribute("type","text");
		nomjoueur.id="nom_"+(i+1);
		
		var paysjoueur = document.createElement("input");
		paysjoueur.setAttribute("type","text");
		paysjoueur.id="pays_"+(i+1);
		
		var catjoueur = document.createElement("input");
		catjoueur.setAttribute("type","text");
		catjoueur.id="cat_"+(i+1);
		
		mycell1.appendChild(numero);
		mycell2.appendChild(nomjoueur);
		mycell3.appendChild(paysjoueur);
		mycell4.appendChild(catjoueur);
		
		myrow.appendChild(mycell1);
		myrow.appendChild(mycell2);
		myrow.appendChild(mycell3);
		myrow.appendChild(mycell4);
		
		parentNode.appendChild(myrow);
	}
}

s'il y'a des idées d'amélioration et optimisation pour cette fonction elles sont les bienvenues

xavierm02

3 avril 2009 à 10:48:44

Bah tout bêtement compter le nombre de lignes/colonnes déjà existantes... et ne rajouter/enlever que ce qu'il faut...