table entête fixe corps scrollable

**wincroc** · 20/05/2007, 21h26

Bonsoir,
j'ai un gros souci avec mon code, j'ai passé la journée dessus et je n'ai toujours pas trouvé ou ca coince. En fait le but est de faire une table avec une entete fixe et un tbody qui possede un scroll.
Mon code fonctionne tres bien sous fireFox mais sous IE je ne vois pas les lignes du Tbody. Je ne comprend.
J'ai adapté mon code pour pouvoir le placer sur le post mais a voir comme ca, je vous comprendrez et vous me disiez, que ca ne sert a rien. Mais dans le contexte OUI.
ouvrez le code sous fireFox et vous verrey l'intitulé de la colonne et la ligne dessous
ouvrez maintenant sous IE et vous ne verrez que l'intitulé de la colonne. pourquoi ?

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
 
<html>
<head>
	<script type="text/javaScript" src="prototype/dist/prototype.js"></script>
	<script type="text/javaScript">
		function construireTable() {
			var body = document.getElementsByTagName("body")[0];
			var fragment = document.createDocumentFragment();
			var premierContainer = document.createElement("div");
			Element.addClassName(premierContainer,"compTable");
			fragment.appendChild(premierContainer);
			var tableEntete = document.createElement("table");
			Element.addClassName(tableEntete,"entete")
			premierContainer.appendChild(tableEntete);
			var thead = document.createElement("thead");
			tableEntete.appendChild(thead);
			var tr = document.createElement("tr");
			thead.appendChild(tr);
			var th = document.createElement("th");
			tr.appendChild(th);
			var titre = document.createElement("label");
			var texte = document.createTextNode("test");
			titre.appendChild(texte);
			th.appendChild(titre);
 
 
			//ajout de la balise Tbody pour le corps de la table
			var tbody = document.createElement("tbody");
			tableEntete.appendChild(tbody);
			var trBody = document.createElement("tr");
			tbody.appendChild(trBody);
			var tdBody = document.createElement("td");
			tdBody.setAttribute("colSpan","1");
			trBody.appendChild(tdBody);
			var divBody = document.createElement("div");
 
			tdBody.appendChild(divBody);
			var tableBody = document.createElement("table");
			var trt = document.createElement("tr");
			var tdr = document.createElement("td");
			var texter = document.createTextNode("tttttttttttt");
			tdr.appendChild(texter);
			trt.appendChild(tdr);
			tableBody.appendChild(trt);
 
 
			divBody.appendChild(tableBody);
			body.appendChild(fragment);
		}
 
	</script>
	<style>
		.compTable table{
		border: 2px solid #3399CC;
		border-collapse: collapse;
		}
		.compTable  th{
		border-bottom: 2px solid #3399CC;
		}
		.compTable  td{
			border-right: 1px solid #3399CC;
			border-left: 1px solid #3399CC;
			border-top: 1px dotted #3399CC;
			border-bottom: 1px dotted #3399CC;
		}
		.compTable .entete  {
			margin:0 auto;
			border-collapse:collapse;
		}
		.compTable .tableBody {
			border-collapse:collapse;
		}
		.innerBody {
			overflow:auto;
		}
	</style>
</head>
<body onload="construireTable();">
	<div id="TableUtilisateur"></div>
 
 
</body>
</html>

**jeje13009** · 20/05/2007, 23h15

slt,

si tu expliquais plus exactement ce que tu veux faire... pck là à première vue je ne vois pas l'intérêt de construire ta table par javascript, surtout via le dom !

si tu dois vraiment passer par javascript pour construire ta table, crée-la dans une variable avant de l'insérer par innerHTML ; ce qui donne qqch comme :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
function creerTable(){
  var str;
  str = "<table><tr>";
  str = str + "<td>...</td>";
  str = str + "</tr></table>";
  document.getElementById("id_de_ton_div").innerHTML = str;
  }
</script>

**wincroc** · 21/05/2007, 08h30

je m'en doutais qu'on allais me repondre ce genre de chose. Je veux absolument l'inserer de cette maniere car le nombre de colonne sera dynamique ainsi que le titre de chaque colonne. Je repete que le morceau de code que j'ai placé est juste un enchainement pour reproduire le bug que j'ai avec IE.
Pourquoi ne voit ton pas la deuxieme table crée dans le Tbody ?

**SpaceFrog** · 21/05/2007, 08h35

j'ai collé un code pour ça dans l'ancienne FAQ ...
une recherche s'impose ...

**wincroc** · 21/05/2007, 09h50

Desolé pour les erreurs de titre, je fais faire attention desormais.
Merci beaucoup pour ton aide, je vais essayer de mettre en place ton exemple dans ma page.

**wincroc** · 21/05/2007, 10h55

au secour
Je vais me servir de la struture de l'exemple codeSource mais j'ai quand meme
besoin de resoudre ce probleme.
La fonction est vraiment tres simple. Construction d'une table avec une cellule.
Sous fireFox, je vois mon titre de cellule mais pas sous IE. Et pourtant avec un inspecteur de dom, mes balise sont bien presente alors pourquoi on ne voir rien ?

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
 
<html>
<head>
	<script type="text/javaScript">
		function test() {
			var noeud = document.getElementsByTagName("body")[0];
			var table = document.createElement("table");
			var tr = document.createElement("tr");
			var titre = document.createTextNode("titr");
			var td = document.createElement("td");
			td.appendChild(titre);
			tr.appendChild(td);
			table.appendChild(tr);
			noeud.appendChild(table);
		}
 
	</script>
</head>
<body onload="test();">
 
</body>
</html>

**SpaceFrog** · 21/05/2007, 11h09

il faut appender dasn le tbody ...

tu peux le créer

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
<html>
<head>
	<script type="text/javaScript">
		function test() {
			var noeud = document.getElementsByTagName("body")[0];
			var table = document.createElement("table");
			var tbody=document.createElement("tbody");
			var tr = document.createElement("tr");
			var td = document.createElement("td");
 
			td.appendChild(document.createTextNode("titre"))
 
			tr.appendChild(td);
			tbody.appendChild(tr)
			table.appendChild(tbody);
			noeud.appendChild(table);
		}
 
	</script>
</head>
<body onload="test();">
 
</body>
</html>

**wincroc** · 21/05/2007, 11h17

ca fonctionne aussi sous IE !!!!
mais pourquoi ? est ce que
<table><tr><td>gg</td></tr></table> est interdit ?

**SpaceFrog** · 21/05/2007, 11h21

un table a toujours avoir un tbody ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
	<script type="text/javaScript">
		function test() {
		alert(document.getElementsByTagName('table')[0].getElementsByTagName('tbody').length)
		}
	</script>
</head>
<body onload="test();">
<table>
</table>	
</body>
</html>

**wincroc** · 21/05/2007, 11h34

Merci beaucoup pour votre aider et toutes ses infos

**bigboomshakala** · 21/05/2007, 12h32

ce serait pas plus simple d'utiliser insertRow et insertCell ? (FAQ)

**wincroc** · 21/05/2007, 13h45

Envoyé par SpaceFrog

j'ai collé un code pour ça dans l'ancienne FAQ ...
une recherche s'impose ...

Dond j'ai compris ma table a partir d'exemple mais comment gérer le cas, où l'on souhaite definir une largeur pour chaque colonne car dans la table inférieur qui possede le srcoll, les bordures ne sont plus aligné.
Avez vous une solution ?

**SpaceFrog** · 21/05/2007, 13h51

il me semble que dans mon exemple je définis dynamiquement la largeur des colonnes non ?
Suffit de metrte un array avec les largeurs définise ou calculées ...

**wincroc** · 21/05/2007, 15h23

au depart, je ne m'étais pas servi de la fonction qui permet de calculer la largeur des colonnes car ca imposé de pointer sur un ID unique donc si j'appelle plusieurs fois ma fonction, j'aurai deux tables avec des id identiques.
J'ai adapté la fonction et mon code et ca merche impeccable !

prochaine etape, Au clique sur une cellule, je souhaite colorier la ligne pour indiquer qu'elle est sélectionné.

Merci, merci

**SpaceFrog** · 21/05/2007, 15h27

avec :

Code :

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

onclick="this.parentNode.style.backgroundColor='red'"

dans le td ?

**wincroc** · 21/05/2007, 15h57

j'ai vraiment honte de ma question mais je n'ai jamais eu le cas et je bloque :
je suis perdu avec les "" et ''

Code :

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

1
2
 
Element.setAttribute(td,"onclick="this.parentNode.style.backgroundColor='red'"");

**SpaceFrog** · 21/05/2007, 16h05

Code :

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

1
2
3
4
mestds=document.getElementsByTagName('table')[0].getELementsByTagName('td');
for (i=0;i<mestd.length;i==){
mestd[i].onclick=function(){this.parentNode.style.backgroundColor='red'};
}

**wincroc** · 21/05/2007, 18h01

Impeccable, ca marche, j'arrive maintenant a sélectionner une ligne.

autre chose : j'aimerai deplacer l'ascensseur automatiquement pour voir une ligne précise.
est ce possible ?

**SpaceFrog** · 21/05/2007, 19h26

scrollTop sur le div conteneur du corps ...

**wincroc** · 22/05/2007, 14h56

j'ai fait des recherche sur scrollTop mais ca fonctionne avec des pixels.
Mais comment savoir que ma 15eme ligne que je dois faire apparaitre en a telle position.
Car faut trouve la position d'une ligne qui n'est pas présente a l'ecran a cause de l'ascensseur. Il doit y avoir quelque chose qui m'echappe

table entête fixe corps scrollable

JavaScript

Discussions similaires

Partager

Partager