[DOM] Ajout dynamique de tableau

Version imprimable

Bonjour à tous,

Voilà j'aimerais savoir comment faire pour ajouter dynamiquement de morceau de tableau.

Je m'explique; j'ai le tableau suivant
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <table id="galerie_cat" width="100%"> <tr id="mon_premier_element"> <td> <table id="galerie_cat_no2" width="100%"> <tr > <td valign="top" width="150px"><img src="modules/galerie_membre/image_galerie/test.jpg" width="114px" height="150px" > </td> <td valign="top" style="padding-left:10px;">legende</td> <td valign="top" width="5%"><img src="images/espace_membre/edit2.png"></td> <td valign="top" width="5%"><img src="images/espace_membre/del.png"></td> </tr> </table> </td> </tr> </table>
Voici donc le code et je voudrais ajouter de manière dynamique un élément <tr> au tableau id="galerie_cat" et dans ce tr serait logé comme dans le code ci-dessous les infos. (table id="galerie_cat_no2" etc...)

//edit : la suppression m'interesse aussi !!! de l'élément mon_premier_element

Merci d'avance de votre aide...

P.S: si mes explications ne sont pas claire n'hésitez pas à me demander de nouveau ;)

03/06/2007, 19h19
Auteur

bonjour,

cf. http://www.developpez.net/forums/sho...d.php?t=334611
03/06/2007, 19h38
sacados1

Merci je vais tester donc!

Bonsoir,

J'ai donc tester ! Pour la suppression pas de problème mon soucis se situe au niveau de l'ajout enfin visuellement cela s'ajoute mais ma fonction supprimer ne s'exécute pas comme il faut:

Le javascript :

Code:

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
 
<?
function supprimer_imagemembre(ligne2,tableau,compte,id)
			{
			alert(id);
			if(confirm('".GLM_SUP."'))
				{
				var ligne = document.getElementById(ligne2);
				document.getElementById(tableau).deleteRow(ligne.rowIndex);
				/* fonction ajax de suppression */
				var xmlhttp = getHTTPObject();
    			xmlhttp.open(\"GET\", 'modules/galerie_membre/ajax/supprime.php?id='+id);
				vider_cache(xmlhttp);
    			xmlhttp.onreadystatechange = function() 
					{
		  			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						if(xmlhttp.responseText.charAt(0)!=1)
							alert('".GLM_ERRSUP."');
						}
       				}
				xmlhttp.send(null);
				/*
				//Recomptage des lignes...
  				var tableau = document.getElementById(tableau);
  				var trs = tableau.rows;
  				var n = trs.length;
  				var i;
 				for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
  					{
    				trs[i].cells[0].innerHTML = trs[i].rowIndex;
  					}
				*/
				document.getElementById(compte).innerHTML=parseInt(document.getElementById(compte).innerHTML)-1;
				}
			}
		function test(image,id)
			{
			alert('id='+id+'  image='+image);
			var tableau = document.getElementById('galerie_cat');
  			var ligne = tableau.insertRow(-1); 
 
  			Cell    		= ligne.insertCell(0);
			Cell.id 		= 'galerie_membre_'+id;
  			Cell.innerHTML	= '<table id=\"galerie_cat_no2\" width=\"100%\"><tr><td valign=\"top\" width=\"150px\"><img src=\"modules/galerie_membre/image_galerie/mini_'+image+'\"></td><td valign=\"top\" style=\"padding-left:10px;\">&nbsp;</td><td valign=\"top\" width=\"5%\"><img src=\"images/espace_membre/del.png\" style=\"cursor:pointer;\" title=\"".GLM_SUPIN2."\" alt=\"".GLM_SUPIN2."\" onclick=\"supprimer_imagemembre(\'galerie_membre_'+id+'\',\'galerie_cat\',\'nb_imagegalerie\',id);\"></td></tr></table>';
			}
?>

test() est la fonction d'ajout.

Se reporter au code de mon premier post pour voir le code html.

Merci d'avance à vous!:)

04/06/2007, 23h00
Auteur

innerHTML pour insérer un tableau dans une cellule (qui condiendra 2 images), ce n'est pas ce qu'il y a de mieux :?

Utilise les fonctions du DOM : createElement. Et je pense que tu peux te passer de l'insertion d'un tableau dans une cellule pour présenter ta page et utiliser des feuilles de styles.
04/06/2007, 23h40
sacados1

Oui c'est clair !!!

Tu as raison j'ai utilisé un style et punaise ben l'insertion et la suppression devienne un jeu d'enfant je fait juste un hidden=true et pour les création des innerHTML et hop c'est ok !

Merci de ton aide elle m'a permius d'apprendre des choses sur les tableau et le DOM merci à toi :king:

Bonnne continuation !

content pour toi si ça marche ;)

Mais quand je te disais d'utiliser les méthodes du DOM, je fais allusion à quelque chose dans ce genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function test(image,id)
{
alert('id='+id+'  image='+image);
var tableau = document.getElementById('galerie_cat');
var ligne = tableau.insertRow(-1); 
 
var Cell = ligne.insertCell(0);
Cell.id = 'galerie_membre_'+id;
 
 
var imgCell = document.createElement("img");
imgCell.src = "modules/galerie_membre/image_galerie/mini_"+image;
imgCell.style.float="left";
 
/* etc.......*/
 
Cell.appendChild(imgCell);
}

05/06/2007, 11h02
deY!

Je supporte pas innerHTML, oriente toi vers createElement, removeChild, et autre.... insertRow aussi comme le dit Auteur...
05/06/2007, 18h25
sacados1

Oui c'est sur que c'est mieux je le reconnais mais utiliser cela est très lourd !!!!

Je me suis orienter vers les div qui se créé mais aussi avec la méthode innerHTML comment créer ces div avec votre méthode ?

Merci de votre écoute.;)

Code:

1 2 3 4 var mycontener = document.getElementById('myelement'); //ou tout autre moyen de recup un NOEUD qui doit receptionner les nouveaux element var mydiv = document.createElment('div'); mydiv.setAttribute('class', 'myclass'); mycontener.appendChild('mydiv');
Attention appendChild rajoute à la suite... si tu veux remplacer, tu as replaceChild, si tu veux supprimer et rajouter, tu dois faire removeChild puis appendChild

05/06/2007, 20h07
Auteur
Code:

1 2 mydiv.setAttribute('class', 'myclass');
Simple curiosité setAttribute est reconnu par tous les navigateurs ?

Sinon (équivalent à la ligne de code ci-dessus):
Code:

1 2 mydiv.className = "myclass";
05/06/2007, 20h55
deY!

Sur IE ça ne fonctionne pas c'est vrai... Mais IE c'est un peu de la daube en boite :aie:

Je sors d'une longue periode de dev Javascript avec FF et SVGViewer qui eux le comprenne, même le DOM 2 ... bref... c'est pas le sujet...
14/06/2007, 16h38
sacados1

Merci à tous pour vos réponse grâce à vous j'ai pu comprendre pas mal de mécanisme !!!

J'ai donc terminé ce que je voulais faire et je suis trés content.

Merci à tous!!!!