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.