J'ai un tableau donnant des dates diverses, concernant deux groupes distincts (le chœur et l'orchestre), et je souhaiterais qu'en cliquant sur un bouton donné, un seul des deux groupes s'affiche, et vice versa (chaque groupe peut ainsi mieux voir ce qui le concerne directement sans devoir se farcir les dates de l'autre groupe).
J'ai utilisé un système qui se résume à ça :
[javascript]function ShowHide(n)
{
var Orc = 10;
var Cho = 23;
if(n==0)
{
for(i=1 ; i<=Orc ; i++)
{
document.getElementById('ShowHide_O_'+i).style.visibility = 'visible';
}
for(i=1 ; i<=Cho ; i++)
{
document.getElementById('ShowHide_C_'+i).style.visibility = 'hidden';
}
}
else if(n==1)
{
for(i=1 ; i<=Orc ; i++)
{
document.getElementById('ShowHide_O_'+i).style.visibility = 'hidden';
}
for(i=1 ; i<=Cho ; i++)
{
document.getElementById('ShowHide_C_'+i).style.visibility = 'visible';
}
}
else
{
for(i=1 ; i<=Orc ; i++)
{
document.getElementById('ShowHide_O_'+i).style.visibility = 'visible';
}
for(i=1 ; i<=Cho ; i++)
{
document.getElementById('ShowHide_C_'+i).style.visibility = 'visible';
}
}
}
</script>[/javascript]
et pour le code HTML (je vous fais grâce du tout et j'en mets juste une partie) :
<tr class='TAB_CHO1' id='ShowHide_C_7'>
<td rowspan='9' style='background:#CCCCCC;width:20px;'><b>R<br />A<br />M<br />E<br />A<br />U</b></td>
<td>Mercredi 06/11</td>
<td>Rameau : 2,4,6</td>
<td>Choeur</td>
<td>Sopranos</td>
</tr>
<tr class='TAB_CHO1' id='ShowHide_C_8'>
<td>Mercredi 13/11</td>
<td>Rameau : 8,9,12</td>
<td>Choeur</td>
<td>Altos</td>
</tr>
<tr class='TAB_ORC' id='ShowHide_O_4'>
<td>Samedi 16/11</td>
<td>Filage Rameau</td>
<td>Orchestre</td>
<td> </td>
</tr>
<tr class='TAB_CHO1' id='ShowHide_C_9'>
<td>Mercredi 20/11</td>
<td>Rameau : 11,13,14</td>
<td>Choeur</td>
<td>Ténors</td>
</tr>
<tr class='TAB_GEN'>
<td>Samedi 23/11</td>
<td>Filage Rameau</td>
<td>Orchestre</td>
<td> </td>
</tr>
<tr class='TAB_CHO1' id='ShowHide_C_10'>
<td>Mercredi 05/12</td>
<td>Selon besoin</td>
<td>Choeur</td>
<td>Basses</td>
</tr>
<tr class='TAB_CON'>
<td>Vendredi 29/11</td>
<td colspan='3'>Eglise ?</td>
<td> </td>
</tr>
<tr class='TAB_CON'>
<td>Samedi 30/11</td>
<td colspan='3'>Eglise ?</td>
<td> </td>
</tr>
<tr class='TAB_CON'>
<td>Dimanche 01/12</td>
<td colspan='3'>Eglise St-Gilles - 16h</td>
<td>Pot d'après concert</td>
</tr>
<tr class='TAB_CHO2' id='ShowHide_C_11'>
<td colspan='2'>Mercredi 04/12</td>
<td>8,10</td>
<td>Pupitres hommes</td>
<td>Tout le monde</td>
</tr>
<tr class='TAB_CHO2' id='ShowHide_C_12'>
<td colspan='2'>Mercredi 11/12</td>
<td>8,10</td>
<td>Pupitres femmes</td>
<td>Tout le monde</td>
</tr>
<tr class='TAB_ORC' id='ShowHide_O_5'>
<td colspan='2'>Samedi 14/12</td>
<td>8,9</td>
<td>Orchestre</td>
<td> </td>
</tr>
<tr class='TAB_CHO1' id='ShowHide_C_13'>
<td colspan='2'>Mercredi 18/12</td>
<td>9A,10</td>
<td>Choeur</td>
<td>Soprano</td>
</tr>
Alors avec des style.visibility, ça fonctionne bien, mais les lignes cachées restent présentes, il n'y a juste rien dedans... pas terrible pour la mise en page.
Avec des style.display, ça fonctionne aussi, les cases non concernées disparaissent corps et bien, mais du coup toute la mise en forme part de travers (j'ai des largeurs de colonne fixes qui ne sont plus respectées du tout).
J'ajoute enfin qu'avec un td rowspan, ça pose des problèmes supplémentaires, puisque le rowspan en question concerne le chœur comme l'orchestre : il me faudrait un rowspan variable ?
Bref, je soumets ce cas de conscience à vous autres experts