[Débutant] childNodes et table

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

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, 10h40

Un classique pourtant

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

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

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, 11h10

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, 11h23

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, 11h47

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