Masquer des colonnes dans un tableau

Question

fornorst

22 Apr 2006 à 19:22

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 ). 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

QuentinC

22 Apr 2006 à 21:44

Bonjour,

Pour masquer une colonne de tableau, je pense qu'il faut parcourir les lignes de celui-ci une à une et masquer la colonne correspondante pour chacune des ligne avec display:none ... je ne sais pas si c'est très clair mais l'idée y est.

Javatwister

24 Apr 2006 à 19:36

eh oui: javascript ne connaît pas l'objet "colonne", pas plus que html d'ailleurs...;
le script peut être assez lourd, du coup... à moins de passer par listes flottantes à la place d'un tableau Smiley biggrin

mais j'avoue que je n'ai jamais essayé un tel travail de titan!

QuentinC

24 Apr 2006 à 21:25

Je pense tout d'un coup à un truc : et les balises col et colgroup ?
J'ai jamais essayé donc je ne sais pas si elles peuvent avoir une utilité quelconque en javascript.

fornorst

24 Apr 2006 à 21:59

pour info, voici ce qu'on m'a proposé sur le forum javascrip de developpez.com :


<html>
<head>
<title>Test Tab1
</title>
</head>
<script type="text/javascript">
function Switch(ID, name)
{
   var table = document.getElementById(ID);
   var line = document.getElementById(ID).getElementsByTagName("tr").length - 1;
   var detail = document.getElementsByName(ID + "_" + name + "_detail");
   var resume = document.getElementsByName(ID + "_" + name + "_resume");
   var img = document.getElementsByName(ID + "_" + name + "_switch")[0];

   if (detail[0].style.display == "table-cell")
   {
      for(var i = 0; i < detail.length; ++i) detail[ i].style.display = "none";
      for(var i = 0; i < resume.length; ++i) resume[ i].style.display = "table-cell";
      img.src = "plus.jpg"; /* chuis pas sûr de cette ligne ! */
      img.parentNode.colspan = resume.length/line;
   } else {
      for(var i = 0; i < detail.length; ++i) detail[ i].style.display = "table-cell";
      for(var i = 0; i < resume.length; ++i) resume[i ].style.display = "none";
      img.src = "moins.jpg"; /* chuis pas sûr de cette ligne ! */
      img.parentNode.colspan = detail.length/line;
   }
}
</script>
<body onload="Switch('doc_X', 'doc'); Switch('doc_X', 'ms'); Switch('doc_X', 'mc')">
<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_X_doc_switch" onclick="Switch('doc_X', 'doc')" /></td>

    <td colspan="2">metric 1 <img src="plus.jpg" name="doc_X_ms_switch" onclick="Switch('doc_X', 'ms')" /></td>
    <td colspan="7">metric 2 <img src="plus.jpg" name="doc_X_mc_switch" onclick="Switch('doc_X', 'mc')" /></td>
  </tr>
  <tr>
    <td width="6%" name="doc_X_doc_detail">Doc1</td>
    <td width="6%" name="doc_X_doc_detail">Doc2</td>
    <td width="6%" name="doc_X_doc_detail">Doc3</td>

    <td width="6%" name="doc_X_doc_detail">Doc4</td>
    <td width="6%" name="doc_X_doc_detail">Doc5</td>
    <td width="6%" name="doc_X_doc_detail">Doc6</td>
    <td width="6%" name="doc_X_doc_resume" colspan=6>&nbsp;</td>
    <td width="6%" name="doc_X_ms_detail">MS1</td>
    <td width="6%" name="doc_X_ms_detail">MS2</td>

    <td width="6%" name="doc_X_ms_resume" colspan=2>&nbsp;</td>
    <td width="6%" name="doc_X_mc_detail">MC1</td>
    <td width="6%" name="doc_X_mc_detail">MC2</td>
    <td width="6%" name="doc_X_mc_detail">MC3</td>
    <td width="6%" name="doc_X_mc_detail">MC4</td>
    <td width="6%" name="doc_X_mc_detail">MC5</td>

    <td width="6%" name="doc_X_mc_detail">MC6</td>
    <td width="6%" name="doc_X_mc_detail">MC7</td>
    <td width="6%" name="doc_X_mc_resume" colspan=7>&nbsp;</td>
  </tr>
  <tr>
    <td>Composant1</td>
    <td name="doc_X_doc_detail">1</td>

    <td name="doc_X_doc_detail">1</td>
    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_detail">1</td>
    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_detail">1</td>
    <td name="doc_X_doc_resume" colspan=6>4</td>

    <td name="doc_X_ms_detail">1</td>
    <td name="doc_X_ms_detail">1</td>
    <td name="doc_X_ms_resume" colspan=2>2</td>
    <td name="doc_X_mc_detail">0</td>
    <td name="doc_X_mc_detail">0</td>
    <td name="doc_X_mc_detail">1</td>

    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_detail">0</td>
    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_resume" colspan=7>4</td>
  </tr>

  <tr>
    <td>Composant2</td>
    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_detail">1</td>
    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_detail">1</td>

    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_resume" colspan=6>2</td>
    <td name="doc_X_ms_detail">1</td>
    <td name="doc_X_ms_detail">1</td>
    <td name="doc_X_ms_resume" colspan=2>2</td>

    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_detail">0</td>
    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_detail">1</td>

    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_resume" colspan=7>6</td>
  </tr>
  <tr>
    <td>Composant3</td>
    <td name="doc_X_doc_detail">1</td>
    <td name="doc_X_doc_detail">0</td>

    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_detail">0</td>
    <td name="doc_X_doc_detail">1</td>
    <td name="doc_X_doc_resume" colspan=6>2</td>
    <td name="doc_X_ms_detail">0</td>

    <td name="doc_X_ms_detail">1</td>
    <td name="doc_X_ms_resume" colspan=2>1</td>
    <td name="doc_X_mc_detail">0</td>
    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_detail">0</td>
    <td name="doc_X_mc_detail">0</td>

    <td name="doc_X_mc_detail">0</td>
    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_detail">1</td>
    <td name="doc_X_mc_resume" colspan=7>3</td>
  </tr>
</table>
</body>
</html>

Ca marche pas trop mal, il ne me reste plus qu'à faire quelques ajustements (un rowspan ici, un width par là) et tout sera (presque) parfait. En tout cas, merci des idées. L'idée était effectivement la bonne mais je ne voyais pas comment faire facilement.

Edit : QuentinC, ton site est vraiment sympa. Par contre, les liens vers les bibilotèques de fonctions javascript semblent morts Smiley cligne

Edit2 : correction effectuée
Modifié par fornorst (25 Apr 2006 - 20:14)

QuentinC

25 Apr 2006 à 17:10

Merci. Je vais vérifier les liens de mes bibliothèques.

Fais attention avec les indices de tableaux [ i ] car le forum les interprète comme une balise bbcode d'italique. Pourais-tu éditer ton post ? Pour corriger le problème, il suffit d'ajouter un espace soit avant le crochet fermant, soit après le crochet ouvrant.
Modifié par QuentinC (25 Apr 2006 - 17:10)

Sujet clos