Masquer des colonnes dans un tableau

Version imprimable

22/04/2006, 19h18
fornorst

Masquer des colonnes dans un tableau

Bonjour à tous,

dans le cadre du développement d'un outil de reporting, je suis confronté à un souci de lisibilité des informations. Pour résumer, j'ai une page regroupant une liste des projets (informatiques) de l'entreprise. A chacun de ses projets est associé une liste de composants logiciels (variables selon les projets et évolutibles dans le temps). Pour chacun de ces composants, différentes informations sont fournies (doc de design, doc d'installation, rapport de test unitaires, taux de couverture des test unitaires, complexité du code, changelog, ...). Ces informations sont regroupées par groupe (documentation, métrique de qualité, divers, ...).

Toutes ces infos sont regroupés dans des tableaux. Pour des raisons de lisibilité et de performance à la génération, chaque projet possède son propre tableau (bien que la structure de chaque tableau soit identique). Dans chaque cellule (regroupement entre un composant logiciel et une information), une icône est affichée. Elle représente un indicateur sur la métrique (présente/absente, bonne/mauvaise, ...).

Comme vous pouvez vous en douter, le tableau commence à dépasser largement en largeur (même en 1280x800 :D). La solution envisagée est de pouvoir collapser un groupe, ce qui permettrait de ne plus afficher qu'une icone de résumé pour le groupe et non plus 2,3 ou 7 icônes. Pour des raisons de volumétrie et sécurité, cette page est statique et ne peut donc contenir aucune clause dynamique à exécuter côté serveur (jsp ou php par exemple). La seule solution pour collapser les cellules reste donc le javascript.

Histoire d'illustrer ce que je souhaite réaliser, voici une image présentant le tableau initial (avec la notion de groupe d'informations, d'informations et de composants) :

http://alvado.org/pub/KK.png

Pouvez-vous m'expliquer (ou au moins me donner des pistes sur la façon de faire celà ?), sachant que dans ma page, je n'ai pas 1 mais une multitude de tableaux de ce genre (une quinzaine environ) mais qu'ils ont tous la même structure, connue à l'avance ? D'avance merci à tous ceux qui auront pris la peine de lire jusqu'au bout et encore plus à ceux qui auront pu m'aider !

Rémi

Salut !

j'aurais bien une idée sur la façon de faire ça...

il faudrait que toutes les colonnes (détails et résumés) soient générées en (X)HTML

ensuite, il faudrait nommées spécialement plusieurs balises si possible, exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table id="doc_X">
<th>
<td>doc +/-</td>
<td>mertic1 +/-</td>
<td>metric2 +/-</td>
</th>
<tr>
<td name="doc_resume">&nbsp;</td>
<td name="doc_detail">Doc 1</td>
<td name="doc_detail">Doc 2</td>
<td name="doc_detail">Doc 3</td>
.
.
.
</tr>
<!-- pareil pour les données -->

j'espère que c'est clair ;)

ensuite : tu modifies le <th> comme ça :

Code:

1
2
3
4
5
<th>
<td>Doc <span name="doc_switch" onclick="switch('doc_X', 'doc')">+</span></td>
<td>metric 1 <span name="met1_switch" onclick="switch('doc_X', 'met1')">+</span></td>
<td>metric 2 <span name="met2_switch" onclick="switch('doc_X', 'met2')">+</span></td>
</th>

enfin le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function switch(var ID, var name)
{
   var table = document.getElementById(ID);
   var detail = table.getElementsByName(name + "_detail");
   var resume = table.getElementsByName(name + "_resume");
   var span = table.getElementsByName(name + "_switch");
 
   if(detail[0].style.display == "table-cell")
   {
      for(var i = 0; i &lt; detail.length; ++i) detail[i].style.display = "none";
      for(var i = 0; i &lt; resume.length; ++i) resume[i].style.display = "table-cell";
      span[0].elements[0].text = "-"; /* chuis pas sûr de cette ligne ! */
   } else {
      for(var i = 0; i &lt; detail.length; ++i) detail[i].style.display = "table-cell";
      for(var i = 0; i &lt; resume.length; ++i) resume[i].style.display = "none";
      span[0].elements[0].text = "+"; /* chuis pas sûr de cette ligne ! */
   }
}

Bon je sais pas si c'est super clair... dis moi si il y a un* truc que tu comprends pas ;)

22/04/2006, 22h16
fornorst

C'est très clair, je vais essayer ça dès demain et voir ce que ça peut donner en essayant de faire afficher la colonne de résumé (il ne me semble pas que ta solution la fasse apparaitre ou alors je n'ai pas tout compris, ce qui ne m'étonnerait pas des masses :D).

Pour le span avec le + et le -, je vais faire plus simple en mettant une image et en changeant le src de la balise img.

En tout cas, un grand merci pour cette solution qui devrait beaucoup m'aider !!
22/04/2006, 22h17
Swoög

Je t'en prie, encore faut-il que ça marche ;)

Ok, j'ai essayé et j'ai un problème, je ne peux pas cliquer sur le +. J'ai essayé avec ta technique avec le span et aussi avec ce que je ferai très probablement en version finale avec une image. Voici le code (j'ai bien entendu les fichiers plus.jpg et moins.jpg en local ;) ) :

Code:

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
 
<html>
<head>
<title>Test Tab1
</title>
</head>
<script language="javascript">
function switch(var ID, var name)
{
   var table = document.getElementById(ID);
   var detail = table.getElementsByName(name + "_detail");
   var resume = table.getElementsByName(name + "_resume");
   var span = table.getElementsByName(name + "_switch");
 
   if(detail[0].style.display == "table-cell")
   {
      for(var i = 0; i &lt; detail.length; ++i) detail[i].style.display = "none";
      for(var i = 0; i &lt; resume.length; ++i) resume[i].style.display = "table-cell";
      span[0].src = "moins.jpg"; /* chuis pas sûr de cette ligne ! */
   } else {
      for(var i = 0; i &lt; detail.length; ++i) detail[i].style.display = "table-cell";
      for(var i = 0; i &lt; resume.length; ++i) resume[i].style.display = "none";
      span[0].elements[0].text = "plus.jpg"; /* chuis pas sûr de cette ligne ! */
   }
}
</script>
<body>
<h1>Table initiale</h1>
<table width="100%" border="1" id="doc_X">
  <tr>
    <td rowspan="2">Nom</td>
    <td colspan="6">Doc <img src="plus.jpg" name="doc_switch" onclick="switch('doc_X', 'doc')" /></td>
    <td colspan="2">metric 1 <span name="met1_switch" onclick="switch('doc_X', 'ms')">+</span></td>
    <td colspan="7">metric 2 <span name="met2_switch" onclick="switch('doc_X', 'mc')">+</span></td>
  </tr>
  <tr>
    <td width="6%" name="doc_detail">Doc1</td>
    <td width="6%" name="doc_detail">Doc2</td>
    <td width="6%" name="doc_detail">Doc3</td>
    <td width="6%" name="doc_detail">Doc4</td>
    <td width="6%" name="doc_detail">Doc5</td>
    <td width="6%" name="doc_detail">Doc6</td>
    <td width="6%" name="ms_detail">MS1</td>
    <td width="6%" name="ms_detail">MS2</td>
    <td width="6%" name="mc_detail">MC1</td>
    <td width="6%" name="mc_detail">MC2</td>
    <td width="6%" name="mc_detail">MC3</td>
    <td width="6%" name="mc_detail">MC4</td>
    <td width="6%" name="mc_detail">MC5</td>
    <td width="6%" name="mc_detail">MC6</td>
    <td width="6%" name="mc_detail">MC7</td>
  </tr>
  <tr>
    <td>Composant1</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="ms_detail">1</td>
    <td name="ms_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
  </tr>
  <tr>
    <td>Composant2</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">0</td>
    <td name="ms_detail">1</td>
    <td name="ms_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
  </tr>
  <tr>
    <td>Composant3</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="ms_detail">0</td>
    <td name="ms_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
  </tr>
</table>
</body>
</html>

As-tu une idée sur l'origine de ce souci ? A part ça, ta solution parait vraiment bonne et devrait me permettre d'arriver sans trop de difficultés à la résolution de mon problème. Encore merci.

23/04/2006, 12h38
Swoög

ok, à priori y'a 2/3 trucs qui marchait pas ^^

j'ai joint le code qui marche ^^
24/04/2006, 22h08
fornorst

Un grand merci à toi Swoög pour cette solution. Elle marche très bien sous Firefox (me reste 2-3 trucs pour la rendre vraiment parfaite comme le rowspan de 2 sur la première ligne quand on n'affiche que le résumé ou la taille du tableau en pixel). Par contre, ça ne marche pas du tout sous IE6 (merci d'ailleurs à Microsoft de ne pas mettre de Console Javascript comme Firefox...) : t'as une idée ? J'ai lu ici et là qu'IE préférait les 'id' aux 'name' Ca pourrait venir de là à ton avis ? Je vais essayer en déclarant à la fois le nom et à la fois l'id et en utilisant un getElementById plutot qu'un getElementByName. On verra bien.

En tout cas, encore merci et encore bravo pour cette solution !
26/04/2006, 18h54
Swoög

auncune idée, j'avais jamais entendu parlé de ça :| ...

c'est trop pas normal que ça marche pas sous IE... (enfin, en même temps c'est IE :D)
26/04/2006, 19h14
siddh

ie s'embrouille sur les getElementsByName si on a aussi des id ;)
26/04/2006, 19h20
siddh

a titre indicatif :
http://javascript.developpez.com/sou...=divers#navtab
et
http://www.developpez.net/forums/showthread.php?t=91488
sur les tableaux
26/04/2006, 21h00
fornorst

merci à tous les deux pour ces réponses instructives. Je continue à travailler là dessus mais cette partie là du projet est mis en stand-by pour le moment. Il y a d'auters sujets concernant l'IHM dont la priorité a été rehaussé. Je vous ferai des screenshot du résultat quand ce sera mieux établi.