[DOM] DOM : difficulté d'affichage

**tusssss** · 27/01/2009, 09h45

J'ai écrit un code assez simple qui me permet de construire un tableau en DOM, dans une boucle.

Cependant seulement mes premiers éléments viennent s'afficher, la boucle se refait bien pour le bon nombre d'éléments, cependant ces derniers ne viennent pas s'ajouter au reste du tableau, je pense qu'il doit s'agir d'une erreur au moment ou j'assigne le nom des vraiables, mais je n'en suis pas sur...

Voici mon code, légèrement simplifié :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
 
        var nouveauDiv=document.createElement('DIV');
	var tableau=document.createElement('table');
	var tblBody = document.createElement('tbody');
	for (i=0;i<Liste.length;i++)
	{		
		var tr=document.createElement('tr');
		var td=document.createElement('td');
		var nouveauSpan=document.createTextNode(Liste[i]);
		td.appendChild(nouveauSpan);
		td.style.width=250+"px";
		setStylePourElement(td,"TdDiv");
		td.onmouseover=divOnMouseOver;
    	td.onmouseout=divOnMouseOut;
		td.onclick=divOnClick;
 
		var borderLeftRight=3;
  		var borderTopBottom=3;
 
		td.style.borderRight=borderLeftRight+"px outset";
  		td.style.borderLeft=borderLeftRight+"px outset";
  		td.style.borderTop=borderTopBottom+"px outset";
  		td.style.borderBottom=borderTopBottom+"px outset";
		tr.appendChild(td);
		i++;
		if (Liste[i])
		{
			var td2=document.createElement('td');
			var nouveauSpan2=document.createTextNode(Liste[i]);
			td2.appendChild(nouveauSpan2);
			td2.style.width=250+"px";
			setStylePourElement(td2,"TdDiv");
			td2.onmouseover=divOnMouseOver;
    		td2.onmouseout=divOnMouseOut;
			td2.onclick=divOnClick;
		}
		else
		{
			var td2=document.createElement('td');
			td2.value="&nbsp;";
		}
		td2.style.borderRight=borderLeftRight+"px outset";
  		td2.style.borderLeft=borderLeftRight+"px outset";
  		td2.style.borderTop=borderTopBottom+"px outset";
  		td2.style.borderBottom=borderTopBottom+"px outset";
		tr.appendChild(td2);
		tblBody.appendChild(tr);
	}
	tableau.appendChild(tblBody);
	nouveauDiv.appendChild(tableau);
	_completeDiv.appendChild(nouveauDiv);
	_completeDiv.height=30*i+4;
	showCompleteDiv(_completeDiv);
}

Merci pour votre aide par avance.

**le_chomeur** · 27/01/2009, 09h56

le script étant incomplet cela risque d'être difficile , car a première vue pas de soucis de code ...

aurais tu un exemple en ligne ??

ou le code complet

**tusssss** · 27/01/2009, 10h21

Edité avec la fonction en entier, le code complet est très long et indigeste (car pas commenté, mea culpa...)

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function OuvrirMenu(Liste,color)
	creeAutocompletionDiv(color);
	var nouveauDiv=document.createElement('DIV');
	setStylePourElement(nouveauDiv,"AutoCompleteDiv");
	var tableau=document.createElement('table');
	var tblBody = document.createElement('tbody');
	for (i=0;i<Liste.length;i++)
	{		
		var tr=document.createElement('tr');
		var td=document.createElement('td');
		var nouveauSpan=document.createTextNode(Liste[i]);
                alert(Liste[i]);
		td.appendChild(nouveauSpan);
		td.style.width=250+"px";
		setStylePourElement(td,"TdDiv");
		td.onmouseover=divOnMouseOver;
    	td.onmouseout=divOnMouseOut;
		td.onclick=divOnClick;
 
		var borderLeftRight=3;
  		var borderTopBottom=3;
 
		td.style.borderRight=borderLeftRight+"px outset";
  		td.style.borderLeft=borderLeftRight+"px outset";
  		td.style.borderTop=borderTopBottom+"px outset";
  		td.style.borderBottom=borderTopBottom+"px outset";
		tr.appendChild(td);
		i++;
		if (Liste[i])
		{
			var td2=document.createElement('td');
			var nouveauSpan2=document.createTextNode(Liste[i]);
			td2.appendChild(nouveauSpan2);
			td2.style.width=250+"px";
			setStylePourElement(td2,"TdDiv");
			td2.onmouseover=divOnMouseOver;
    		td2.onmouseout=divOnMouseOut;
			td2.onclick=divOnClick;
		}
		else
		{
			var td2=document.createElement('td');
			td2.value="&nbsp;";
		}
		td2.style.borderRight=borderLeftRight+"px outset";
  		td2.style.borderLeft=borderLeftRight+"px outset";
  		td2.style.borderTop=borderTopBottom+"px outset";
  		td2.style.borderBottom=borderTopBottom+"px outset";
		tr.appendChild(td2);
		tblBody.appendChild(tr);
	}
	tableau.appendChild(tblBody);
	nouveauDiv.appendChild(tableau);
	_completeDiv.appendChild(nouveauDiv);
	_completeDiv.height=30*i+4;
	showCompleteDiv(_completeDiv);
}

Color : contient un code couleur en héxa

Liste est un tableau contenant différents textes et le alert(Liste[i]) me retourne bien au fur et à mesure de la boucle les textes que je souhaite afficher.

Cependant avant je créais un tableau différent à chaque ligne et cela fonctionnait, depuis que j'ai sorti la création de tableau de la boucle, pour pouvoir plus facilement aligner mon menu, il n'y a plus que le premier tr qui s'affiche...

Code de la fonction qui pourrait bugger aussi, mais je ne vois pas pourquoi :

Code :

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

1
2
3
4
function showCompleteDiv(Div)
{
  Div.style.visibility="visible";
}

**E.Bzz** · 27/01/2009, 10h38

Bonjour,
y a un truc de bizarre : à cause de cette condition

Code :

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

if (Liste[i])

tu risques de te retrouver avec des lignes à 1 td et d'autres à 2 td.
La structure de ton tableau n'est pas correcte dans ce cas ...

EDIT : Arf, non, y a un else, donc toujours 2 td

A+

**tusssss** · 27/01/2009, 10h46

Ah j'ai peut-être trouvé :

J'ai dans mon code :

Code :

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

1
2
var td2=document.createElement('td');
td2.value="&nbsp;";

Mais le td2.value, doit être incorrect et donc me créer un problème puisque parfois 1 td et parfois 2... Ca vient peut-être de ca, je vais essayer de modifier cela.

**E.Bzz** · 27/01/2009, 10h58

Envoyé par tusssss

Mais le td2.value, doit être incorrect

C'est surtout qu'un td n'a pas de value

=> createTextNode(" ")

A+

**tusssss** · 27/01/2009, 11h03

Envoyé par E.Bzz

C'est surtout qu'un td n'a pas de value

=> createTextNode(" ")

A+

C'est ce que je voulais dire.

Modifié, mais ne fonctionne toujours pas.

Bout de code remplacé :

Code :

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

1
2
3
4
5
6
7
8
else
		{
			var td2=document.createElement('td');
			var nouveauSpan2=document.createTextNode("&nbsp;");
			td2.appendChild(nouveauSpan2);
			td2.style.width=250+"px";
			setStylePourElement(td2,"TdDiv");
		}

**E.Bzz** · 27/01/2009, 11h05

Envoyé par tusssss

Modifié, mais ne fonctionne toujours pas.

C'est qu'il y a autre chose, mais c'était à corriger de toutes façons ...

A+

**tusssss** · 27/01/2009, 11h13

Complètement d'accord, je repars à la recherche de l'autre bug, il parait logique que celui-ci n'était pas le bug principal puisque cette partie du code n'est utilisée que si j'ai un nobre impair de texte dans la liste, alors que ce code ne fonctionne pas non plus pour les listes avec un nombre pair d'éléments...

Merci pour l'aide. Si vous voyez quelque chose n'hésitez pas.

**tusssss** · 27/01/2009, 11h24

Le fait d'ajouter plusieurs fois le même "tr" ne peux il pas être gênant ?

Ne faut-il pas détruire le tr après l'avoir insérer dans le tableau, pour pouvoir créer une ligne après tout en conservant le tableau ainsi créé au fur et à mesure???

**E.Bzz** · 27/01/2009, 11h50

Envoyé par tusssss

Le fait d'ajouter plusieurs fois le même "tr" ne peux il pas être gênant ?

Normalement, non.
Mais déclarer des variables locales dans une boucle, normalement, si ( = multi-déclarations)

Sinon, as-tu essayé d'utiliser les instructions spécifiques aux tableaux, comme indiqué dans la FAQ ?

A+

**tusssss** · 27/01/2009, 12h06

Envoyé par E.Bzz

Normalement, non.
Mais déclarer des variables locales dans une boucle, normalement, si ( = multi-déclarations)

Sinon, as-tu essayé d'utiliser les instructions spécifiques aux tableaux, comme indiqué dans la FAQ ?

A+

Non pas essayé cela, puisque j'arrivais à faire fonctionner auparavant cela comme je voulais, j'essaye cela en début d'après-midi, merci pour l'aide.

En effet, le problème vient surement de la multidéclaration...Go pour tout refaire avec des insertrow et insertcell...

Merci encore.

**E.Bzz** · 27/01/2009, 12h27

Envoyé par tusssss

En effet, le problème vient surement de la multidéclaration...Go pour tout refaire avec des insertrow et insertcell...

Avant de tout refaire, essaye quand même de virer les déclarations (var) des boucles ...

A+

**tusssss** · 27/01/2009, 15h46

Bon maintenant ça marche, mais j'ai vraiment bidouillé, je ne sais pas comment j'ai fait... Dommage. Un coup de chance, j'aime pas trop ça.

En fait j'ai tout supprimé mes modifs et je les ai refaites en partant du même truc qui fonctionnais toujours avec les td et ça a fonctionné.

**E.Bzz** · 27/01/2009, 15h53

Envoyé par tusssss

Bon maintenant ça marche, mais j'ai vraiment bidouillé, je ne sais pas comment j'ai fait... Dommage.

C'est encore plus mystérieux pour nous

**tusssss** · 27/01/2009, 16h34

Finalement, je me suis bien fatigué pour rien, j'ai re rajouté une ligne que j'avais enlevé dans mon nouveau code, et je me suis retrouvé avec le même bug, il ne vient donc pas de la conception du tableau en lui même, mais de cette ligne :

Code :

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

setStylePourElement(nouveauDiv,"AutoCompleteDiv");

J'avais assigné cette classe au tableau entier plutot qu'au td, et du coup, j'avais limité la taille de mon div, d'ou le fait que seulement la ligne s'affichait, j'étais pourtant persuadé d'avoir affublé les td de ce style et non mon div entier

Désolé pour la recherche. Bonne soirée et merci une nouvelle fois.

[DOM] DOM : difficulté d'affichage

JavaScript

Discussions similaires

Partager

Partager