[D�butant] childNodes et table

**richard_sraing** · 20/03/2009, 09h36

Bonjour tout le monde,

Voil�, dans le cadre du d�veloppement d'une application web, je dois afficher un tableau poss�dant moultes informations.
En effet, je dois afficher dans un tableau, le listing de tables se trouvant dans ma BD.
Pour ce faire, je voulais cr�er une table (HTML) pouvant contenir tous les �l�ments. Le probl�me est que le nombre d'�l�ment est trop grand et donc que ma page devient (automatiquement) scrollable dans tout les sens. Pas bien, car de ce fait, je perds les en-t�tes de mes lignes et colonnes.
Apr�s avoir chercher un petit moment sur le web, j'ai trouver la page suivante:
ici
Le probl�me que j'ai, lorsque je load la page, et qu'il fait donc appel au javascript, il me lance une erreur sur la ligne suivante:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var cornerDiv = table.childNodes[childElement].childNodes[0].childNodes[childElement].childNodes[childElement];

Et je ne sais pas pourquoi. J'ai v�rifier au moins 5 fois toute la structure de ma page, et les balises me semble correspondre.

Je ne sais plus que faire.

[EDIT]
J'ai oublier le plus important, le message d'erreur lancer par Firebug:

table.childNodes[childElement].childNodes[0] is undefined
[/EDIT]

Quelqu'un aurait-il une id�e?

Voici le code de ma page asp:

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
58
59
60
61
62
63
<table class="scrollTable" id="scrollTable" cellpadding="0" cellspacing="0" border="0"> <!-- tableau contenant toutes les informations -->
<tr>
	<td>
		<div class="corner">
			<table cellpadding="0" cellspacing="0" border="0" >
				<tr>
					<th align="center" valign="top"><div>«Code»«Désignation»</div></th>
				</tr>
			</table>
		</div>
	</td>
	<td>
		<div class="headerRow">
			<table cellpadding="0" cellspacing="0" border="0" >
				<tr>
					<th class="Header" align="left"><div>«Désignation»</div></th>
					<th class="Header" align="left"><div>«Catégorie»</div></th>
					<th class="Header" align="left"><div>«Réf. fourn/fabricant»</div></th>
					<th class="Header" align="left"><div>TVA</div></th>
					...
				</tr>
			</table>
		</div>
	</td>
</tr>
<tr>
	<td valign="top">
		<div class="headerColumn">
			<table cellpadding="0" cellspacing="0" border="0" >
				<tr>
					<th class="Header" align="left"><div>001</div></th><th class="Header" align="left"><div>ENTR. CH. </div></th>
				</tr>
				<tr>
					<th class="Header" align="left"><div>00161</div></th><th class="Header" align="left"><div>dgjjgdjf</div></th>
				</tr>
				...
			</table>
		</div>
	</td>
	<td>
		<div class="body">
			<table cellpadding="0" cellspacing="0" border="0" >
				<tr>
					<td class="Data" align="left"><div>ENTR. CH.</div></td>
					<td class="Data" align="left"><div>023</div></td>
					<td class="Data" align="left"><div></div></td>
					<td class="Data" align="left"><div>21</div></td>
				</tr>
				<tr>
					<td class="Data" align="left"><div>dgjjgdjf</div></td>
					<td class="Data" align="left"><div></div></td>
					<td class="Data" align="left"><div></div></td>
					<td class="Data" align="left"><div>21</div></td>
				</tr>
				<tr>
					<td class="Data" align="left"><div>ENTR. CH. </div></td>
					...
				</tr>
			</table>
		</td>
	</tr>
</table>
</div>

Je sais que la balise </div> (la derni�re) semble un peu perdue, pourtant, j'ai essayer de la placer au bon endroit, mais rien n'y change

En voici maintenant le code du fichier Javascript:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
 
var tables = new Array();
var headerRowDivs = new Array();
var headerColumnDivs = new Array();
var bodyDivs = new Array();
var widths = new Array();
var heights = new Array();
var borderHorizontals = new Array();
var borderVerticals = new Array();
var tableWidths = new Array();
var tableHeights = new Array();
var arrayCount = 0;
var paddingTop = 0;
var paddingBottom = 0;
var paddingLeft = 0;
var paddingRight = 0;
 
 
function ScrollTableAbsoluteSize(table, width, height)
{
	ScrollTable(table, null, null, width, height);
}
 
function ScrollTableRelativeSize(table, borderHorizontal, borderVertical)
{
	ScrollTable(table, borderHorizontal, borderVertical, null, null);
}
 
function ScrollTable(table, borderHorizontal, borderVertical, width, height)
{
	var childElement = 0;
	if (table.childNodes[0].tagName == null)
	{
		childElement = 1;
	}
 
	var cornerDiv = table.childNodes[childElement].childNodes[0].childNodes[childElement].childNodes[childElement];  // ligne posant le problème de l'erreur
	var headerRowDiv = table.childNodes[childElement].childNodes[0].childNodes[(childElement + 1) * 2 - 1].childNodes[childElement];
	var headerColumnDiv = table.childNodes[childElement].childNodes[childElement + 1].childNodes[childElement].childNodes[childElement];
	var bodyDiv = table.childNodes[childElement].childNodes[childElement + 1].childNodes[(childElement + 1) * 2 - 1].childNodes[childElement];
 
	tables[arrayCount] = table;
	headerRowDivs[arrayCount] = headerRowDiv;
	headerColumnDivs[arrayCount] = headerColumnDiv;
	bodyDivs[arrayCount] = bodyDiv;
	borderHorizontals[arrayCount] = borderHorizontal;
	borderVerticals[arrayCount] = borderVertical;
	tableWidths[arrayCount] = width;
	tableHeights[arrayCount] = height;
	ResizeCells(table, cornerDiv, headerRowDiv, headerColumnDiv, bodyDiv);	
 
	widths[arrayCount] = bodyDiv.offsetWidth;
	heights[arrayCount] = bodyDiv.offsetHeight;
	arrayCount++;
	ResizeScrollArea();
 
	bodyDiv.onscroll = SyncScroll;
	if (borderHorizontal != null)
	{
		window.onresize = ResizeScrollArea;
	}
}
 
function ResizeScrollArea()
{
	var isIE = true;
	var scrollbarWidth = 17;
	if (!document.all)
	{
		isIE = false;
		scrollbarWidth = 19;
	}
 
	for (i = 0; i < arrayCount; i++)
	{
		bodyDivs[i].style.overflow = "scroll";
		bodyDivs[i].style.overflowX = "scroll";
		bodyDivs[i].style.overflowY = "scroll";
		var diffWidth = 0;
		var diffHeight = 0;
		var scrollX = true;
		var scrollY = true;
 
		var columnWidth = headerColumnDivs[i].offsetWidth;
		if (borderHorizontals[i] != null)
		{
			var width = document.documentElement.clientWidth - borderHorizontals[i] - columnWidth;
		}
		else
		{
			var width = tableWidths[i];
		}
 
		if (width > widths[i])
		{
			width = widths[i];
			bodyDivs[i].style.overflowX = "hidden";
			scrollX = false;
		}
 
		var columnHeight = headerRowDivs[i].offsetHeight;
		if (borderVerticals[i] != null)
		{
			var height = document.documentElement.clientHeight - borderVerticals[i] - columnHeight;
		}
		else
		{
			var height = tableHeights[i];
		}
 
		if (height > heights[i])
		{
			height = heights[i];
			bodyDivs[i].style.overflowY = "hidden";
			scrollY = false;
		}
 
		headerRowDivs[i].style.width = width + "px";
		headerRowDivs[i].style.overflow = "hidden";
		headerColumnDivs[i].style.height = height + "px";
		headerColumnDivs[i].style.overflow = "hidden";
		bodyDivs[i].style.width = width + scrollbarWidth + "px";
		bodyDivs[i].style.height = height + scrollbarWidth + "px";
 
		if (!scrollX && isIE)
		{
			bodyDivs[i].style.overflowX = "hidden";
			bodyDivs[i].style.height = bodyDivs[i].offsetHeight - scrollbarWidth + "px";
		}
		if (!scrollY && isIE)
		{
			bodyDivs[i].style.overflowY = "hidden";
			bodyDivs[i].style.width = bodyDivs[i].offsetWidth - scrollbarWidth + "px";
		}
		if (!scrollX && !scrollY && !isIE)
		{
			bodyDivs[i].style.overflow = "hidden";
		}
	}
}
 
function ResizeCells(table, cornerDiv, headerRowDiv, headerColumnDiv, bodyDiv)
{
	var childElement = 0;
	if (table.childNodes[0].tagName == null)
	{
		childElement = 1;
	}
 
	SetWidth(
		cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement],
		headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[0]);
 
	SetHeight(
		cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement],
		headerRowDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement]);
 
	var headerRowColumns = headerRowDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes;
	var bodyColumns = bodyDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes;
	for (i = 0; i < headerRowColumns.length; i++)
	{
		if (headerRowColumns[i].tagName == "TD" || headerRowColumns[i].tagName == "TH")
		{
			SetWidth(
				headerRowColumns[i], 
				bodyColumns[i], 
				i == headerRowColumns.length - 1);
		}
	}
 
	var headerColumnRows = headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes;
	var bodyRows = bodyDiv.childNodes[childElement].childNodes[childElement].childNodes;
	for (i = 0; i < headerColumnRows.length; i++)
	{
		if (headerColumnRows[i].tagName == "TR")
		{
			SetHeight(
				headerColumnRows[i].childNodes[0],
				bodyRows[i].childNodes[childElement],
				i == headerColumnRows.length - 1);
		}
	}
}
 
function SetWidth(element1, element2, isLastColumn)
{
	var diff = paddingLeft + paddingRight;
 
	if (element1.offsetWidth < element2.offsetWidth)
	{
		element1.childNodes[0].style.width = element2.offsetWidth - diff + "px";
		element2.childNodes[0].style.width = element2.offsetWidth - diff + "px";
	}
	else
	{
		element2.childNodes[0].style.width = element1.offsetWidth - diff + "px";
		element1.childNodes[0].style.width = element1.offsetWidth - diff + "px";
	}
}
 
function SetHeight(element1, element2, isLastRow)
{
	var diff = paddingTop + paddingBottom;
 
	if (element1.offsetHeight < element2.offsetHeight)
	{
		element1.childNodes[0].style.height = element2.offsetHeight - diff + "px";
		element2.childNodes[0].style.height = element2.offsetHeight - diff + "px";
	}
	else
	{
		element2.childNodes[0].style.height = element1.offsetHeight - diff + "px";
		element1.childNodes[0].style.height = element1.offsetHeight - diff + "px";
	}
}
 
function SyncScroll()
{
	for (i = 0; i < arrayCount; i++)
	{
		headerRowDivs[i].scrollLeft = bodyDivs[i].scrollLeft;
		headerColumnDivs[i].scrollTop = bodyDivs[i].scrollTop;
	}
}

Ne connaissant absolument pas le fonctionnement de Javascript, et surtout de ChildNodes, je me permet de me tourner vers vous afin d'obtenir des informations pouvant m'aider � r�soudre l'erreur rencontr�e.

En vous remerciant d'avance pour l'aide que vous pourrez m'apporter, je vous souhaite une bonne journ�e.

**SpaceFrog** · 20/03/2009, 09h40

Un classique pourtant

http://javascript.developpez.com/faq...M#DOMIEFirefox

**richard_sraing** · 20/03/2009, 09h53

euh...

lorsque je cr��e mon tableau avec ma proc�dure, et que j'affiche le code dans Firefox, il me met mon tableau et toute la structure de celui-ci sur une ligne.

Est ce la source du probl�me? Si j'ai bien compris, cela devrait �tre le cas, mais je tiens � en �tre s�r avant de commencer le moindre changement dans ma proc�dure, parce que c'est la # et la banni�re pour s'y retrouver.

Juste une petite confirmation, et je pourrais surement d�j� tagger RESOLU...

**SpaceFrog** · 20/03/2009, 10h10

non c'est parceque IE et ffx ne comptent pas les nodes de la m�me fa�on
relis bien l'article...

**richard_sraing** · 20/03/2009, 10h23

oui d'accord, je veux bien, mais en r�alit� mon code ressemble � �a dans ma page asp:

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
<table class="scrollTable" id="scrollTable" cellpadding="0" cellspacing="0" border="0"> <!-- tableau contenant toutes les informations -->
        <tr><td><div class="corner"><table cellpadding="0" cellspacing="0" border="0" ><tr><th align="center" valign="top"><div>«Code» | «Désignation»</div></th></tr>..... <!-- et le code continue joyeusement dans le fichier, tout en restant sur la même ligne-->
</table>

Une grosse ligne toute d�goutante et provoquant des boutons chez tout d�veloppeur web digne de ce nom (Et oui, je ne me consid�re pas comme d�veloppeur web, car je n'en fait pas partie).
Je l'ai mise en forme afin que vous puissiez obtenir une vue (l�g�rement) plus agr�able de mon code.

Maintenant, mon code,que je le teste sous Firefox ou sous IE, le r�sultat est le m�me, �a ne marche pas.

Mais donc, si je comprend bien, �a devrait marche sous FFx, du fait qu'il n'y a pas "(par exemple les retours � la ligne du code)".
Et pourtant, �a ne fonctionne pas...

Quelqu'un pourrait-il �tre tr�s gentil avec une pauvre clinche comme moi, qui ne comprend rien � tout �a??

**richard_sraing** · 20/03/2009, 10h47

Et bien voil�, je viens de r�soudre le probl�me.

En fait, il suffisait de placer l'appel � la proc�dure sur la m�me que l'ouverture de la table.

Merci, je pense que j'aurais chercher tout le restant de mes jours sur ce satan� probl�me...

[D�butant] childNodes et table

JavaScript

Discussions similaires

Partager

Partager