faire défiler des colonnes d'un tableau

**lelectronique.com** · 15/11/2009, 20h17

Bonsoir,
voilà j'ai un tableau qui fait x colonne celon la sélection du visiteur du site afin de ne pas pertuber la mise en pae je voudrais ajouter un scrollbar en bas du tableau me permettant de le faire défiler en largeur tout en laissant la colonne de gauche toujours visible car il s'agit de la colonne "légende" du tableau
est ce possible ou non ? sinon comment puis je faire
merci d'avance pour votre aide

**kernelfailure** · 15/11/2009, 20h56

En gérant avec un faux défilement à l'aide de display=none ou alors un iframe.

**le_chomeur** · 15/11/2009, 22h33

... kernelfailure essayes au moins de chercher une réponse cohérente avant de répondre merci !

il te faut utiliser soit 2 tableau imbriqués avec une cellule en taille fixée + la propriété overflow:auto

**lelectronique.com** · 15/11/2009, 23h23

merci le_chomeur pour ta reponse, par contre si je fais cela mes lignes ne risque plus d'etre aligné avec ma colonne de gauche non ? je vais tester cela demain

**le_chomeur** · 16/11/2009, 00h00

il te faut fixer la hauteur de chacune des cellules

(ou tr)

**kernelfailure** · 16/11/2009, 02h16

En quoi c'est pas cohérent ?

Premier cas, on dispose d'un tableau pour faire court : 2 lignes, 6 colonnes.
On en affiche que 3.

tr=ligne
th=entête
td=données

Code :

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

1
2
3
4
 
table
tr1 th1 td11 td12 td13 td14 td15 td16
tr2 th2 td21 td22 td23 td24 td25 td26

Les tdx1-tdx3 ont style="". les tdx4-tdx6 sont à display='none'
On ajoute ce que bon nous semble pour proposer un défilement droite-gauche (boutons, '<' '>', etc...).
Imaginons un défilement vers la droite, cela donne :
Les tdx1 passent à display='none'; tx2-tdx' ont style="". les tdx5-tdx6 sont à display='none'.
Gestion de la position obligatoire.

Second cas, on encapsule le tableau de données dans un iframe, défilement horizontal, et on place les entêtes dans un autre tableau à gauche. Ici aussi ça fonctionne, mais il faudra veiller à fixer les hauteurs.

EDIT
Cadeau :
Un petit code vite fait pour montrer que c'est loin d'être incohérent. C'est du code bourrin, mais le principe est là.

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
 
<html>
<head><title>SCROLL ME</title></head>
<body>
<table>
<table id="SCROLLID">
<tr><th>T1</th><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><th>T2</th><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
</table>
<input type="button" value="<<" onclick='SCROLL.first()' id='SCROLLFIRST'>
<input type="button" value="<" onclick='SCROLL.left()' id='SCROLLLEFT'>
<input type="button" value=">" onclick='SCROLL.right()' id='SCROLLRIGHT'>
<input type="button" value=">>" onclick='SCROLL.last()' id='SCROLLLAST'>
<script>
var SCROLL = {
	i:0,
	n:8,	// Total des colonnes
	v:4,	// Nombre de colonne visible
 
	first:function(){
		if(this.i == 0) { return; }
		this.i=0;
		this.display();
		},
 
	right:function(){
		if((this.i + this.v) >= this.n) { return; }
		this.i++;
		this.display();
		},
 
	left:function(){
		if(this.i == 0) { return; }
		this.i--;
		this.display();
		},
 
	last:function(){
		if(this.i == (this.n - this.v)) { return; }
		this.i=this.n - this.v;
		this.display();
		},
 
	display:function(){
		var scr = document.getElementById('SCROLLID');
		scr.style.border='1px black solid'; // A virer
		var trs = scr.getElementsByTagName('tr');
		for (var i=0, n=trs.length; i<n; i++) {
			var tds = trs[i].getElementsByTagName('td');
			for (var j=0, m=tds.length; j<m; j++) {
				tds[j].style.display='';
				if(j<this.i) tds[j].style.display='none';
				if(j>=(this.i+this.v)) tds[j].style.display='none';
			}
		}
		var scr0 = document.getElementById('SCROLLFIRST');
		var scrl = document.getElementById('SCROLLLEFT');
		var scrr = document.getElementById('SCROLLRIGHT');
		var scr9 = document.getElementById('SCROLLLAST');
		scr0.style.visibility ='visible';
		scrl.style.visibility ='visible';
		scrr.style.visibility ='visible';
		scr9.style.visibility ='visible';
		if(this.i == 0) { scrl.style.visibility='hidden'; scr0.style.visibility='hidden'  }
		if((this.i + this.v) >= this.n) { scrr.style.visibility ='hidden'; scr9.style.visibility ='hidden' }
		}
};
SCROLL.display();
</script>
</body>
</html>

**le_chomeur** · 16/11/2009, 10h10

ce n'est la méthode qui me gène mais le principe , on demande a scroller, pas a naviguer, imagine toi avec 500 cellule a gérer ce n'est pas viable , d'ou la demande d'une barre de scroll ....

**le_chomeur** · 16/11/2009, 11h02

voici un exemple en ligne : http://www.imaputz.com/cssStuff/bigFourVersion.html#

et une méthode plus simple utilisant une div a l'intérieur d'un tableau avec la méthode overflow : http://www.ssi-developer.net/css/non...able-hdr.shtml

**Mengué georges** · 16/11/2009, 11h33

Bonjour

C'est la solution que j'utilise mais existe-t-il une solution similaire sur les 2 axes du type figer les volets d'excel pour un tableau de grande dimension

**le_chomeur** · 16/11/2009, 11h47

tu met ton tableau dans une div de taille fixe avec un style="overflow:auto"

**lelectronique.com** · 16/11/2009, 11h51

merci à tous pour votre aide après avoir tester les deux méthodes c'est celle avec les boutons le mieux dans mon cas car cela permet de garder la meme hauteur de ligne partout car queslques fois j'ai des données qui vont prendre 3 lignes et d'autres non donc si je fixe une hateur cela ne va pas faire jolie du tout

**Mengué georges** · 16/11/2009, 12h07

Oui mais ce n'est pas ça que je cherche à faire:
tableau avec entête de colonne et entête de ligne avec 2 scroll.
le scroll vertical fait défiler les lignes et entête de ligne en gardant l'entête de colonne fixe.
le scroll horizontal fait défiler les colonne et entête de colonne en gardant l'entête de ligne fixe.

**kernelfailure** · 16/11/2009, 13h21

Envoyé par le_chomeur

ce n'est la méthode qui me gène mais le principe , on demande a scroller, pas a naviguer, imagine toi avec 500 cellule a gérer ce n'est pas viable , d'ou la demande d'une barre de scroll ....

Je ne comprends pas ta subtilité sémantique.

Un scroll c'est un défilement. Les méthodes de le simuler sont diverses (masquage, extraction, gestion d'un pointeur, etc...). Les IHM pour l'interaction tout aussi diverses (Bouton, barre, jauge, survol, etc...).

500 cellule, c'est ni plus ni moins lourd qu'un scrolling au pixel. Ce code devra cependant être optimisé pour n'avoir à gérer qu'une zone de "(colonne visible) x ligne" (Tout masquer par défaut. Memento sur pointeur. Itération de masquage de l'ancienne zone + Itération d'affichage de la nouvelle zone).

Mais si la base est très grosse, il faudra commencer à entrevoir le couplage avec un accès BDD.

**le_chomeur** · 16/11/2009, 14h59

j'entendais par la , que le scroll est un élément intègré a tous les navigateurs de façon natif, donc pourquoi implémenter un outil javascript ( qui peut s'avérer utile ^^ ) mais pas dans ce cas la ( toujours selon moi ... ) je n'ai pas vu le résultat escompté

faire défiler des colonnes d'un tableau

JavaScript

Discussions similaires

Partager

Partager