Bonjour,

Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
offrant la possibilité de plier/déplier certaines parties (lignes ou
colonnes) avec sous totaux à la manière du mode plan d'Excel.
Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
une solution.
Merci.
Et bon WE.

Le 29/06/2007 10:54, Toto a écrit :
>
> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
> offrant la possibilité de plier/déplier certaines parties (lignes ou
> colonnes) avec sous totaux à la manière du mode plan d'Excel.
> Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
> une solution.

Pour une ligne, c'est facile. La ligne que tu veux cacher, mettons
qu'elle ait l'id "total", tu peux faire :
document.getElementById("total").style.display = "none"; /* cacher */
document.getElementById("total").style.display = ""; /* montrer */

Pour une colonne, c'est un peu plus complexe car tu dois faire ça pour
chaque <th> et <td>, un par ligne. Mais bon, ça se fait aussi.

Olivier Miakinen a présenté l'énoncé suivant :
> Le 29/06/2007 10:54, Toto a écrit :
>>
>> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
>> offrant la possibilité de plier/déplier certaines parties (lignes ou
>> colonnes) avec sous totaux à la manière du mode plan d'Excel.
>> Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
>> une solution.
>
> Pour une ligne, c'est facile. La ligne que tu veux cacher, mettons
> qu'elle ait l'id "total", tu peux faire :
> document.getElementById("total").style.display = "none"; /* cacher */
> document.getElementById("total").style.display = ""; /* montrer */
>
> Pour une colonne, c'est un peu plus complexe car tu dois faire ça pour
> chaque <th> et <td>, un par ligne. Mais bon, ça se fait aussi.

Tu peux aussi voir au niveau des tbody pour afficher/masquer des blocs
de ligne. Pour les colonnes ça se complique parce que certains styles
ne fonctionnent pas dans les colgroup.
A mon avis, ce serait plus facile d'y arriver avec une matrice de div
habilement nommées
[ id=C1-R1 ][ id=C2-R1 ]...[ id=Cn-R1 ]
[ id=C1-R2 ][ id=C2-R2 ]...[ id=Cn-R2 ]
....
[ id=C1-Rn ][ id=C2-Rn ]...[ id=Cn-Rn ]

--
______
Francis (enlever .NIPUBNISOUMIS)
"Les propriétaires de Lada n'ont pas été surpris de voir L'URSS se
morceler"

Olivier Miakinen a présenté l'énoncé suivant :
> Le 29/06/2007 10:54, Toto a écrit :
>>
>> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
>> offrant la possibilité de plier/déplier certaines parties (lignes ou
>> colonnes) avec sous totaux à la manière du mode plan d'Excel.
>> Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
>> une solution.
>
> Pour une ligne, c'est facile. La ligne que tu veux cacher, mettons
> qu'elle ait l'id "total", tu peux faire :
> document.getElementById("total").style.display = "none"; /* cacher */
> document.getElementById("total").style.display = ""; /* montrer */
>
> Pour une colonne, c'est un peu plus complexe car tu dois faire ça pour
> chaque <th> et <td>, un par ligne. Mais bon, ça se fait aussi.

Tu peux aussi voir au niveau des tbody pour afficher/masquer des blocs
de ligne. Pour les colonnes ça se complique parce que certains styles
ne fonctionnent pas dans les colgroup.
A mon avis, ce serait plus facile d'y arriver avec une matrice de div
habilement nommées
[ id=C1-R1 ][ id=C2-R1 ]...[ id=Cn-R1 ]
[ id=C1-R2 ][ id=C2-R2 ]...[ id=Cn-R2 ]
....
[ id=C1-Rn ][ id=C2-Rn ]...[ id=Cn-Rn ]

--
______
Francis (enlever .NIPUBNISOUMIS)
"Les propriétaires de Lada n'ont pas été surpris de voir L'URSS se
morceler"

Il se trouve que Francis Spiesser a formulé :

> Tu peux aussi voir au niveau des tbody pour afficher/masquer des blocs de
> ligne. Pour les colonnes ça se complique parce que certains styles ne
> fonctionnent pas dans les colgroup.
> A mon avis, ce serait plus facile d'y arriver avec une matrice de div
> habilement nommées
> [ id=C1-R1 ][ id=C2-R1 ]...[ id=Cn-R1 ]
> [ id=C1-R2 ][ id=C2-R2 ]...[ id=Cn-R2 ]
> ...
> [ id=C1-Rn ][ id=C2-Rn ]...[ id=Cn-Rn ]

Sinon le code ci-dessous fonctionne dans IE mais pas dans FF (pour la
colonne)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Document sans nom</title>
</head>

<body><table width="200" border="1">
<colgroup span="1"><col id="col1" /></colgroup>
<colgroup span="1"><col id="col2" /></colgroup>
<colgroup span="1"><col id="col3" /></colgroup>
<tbody id="lig1">
<tr>
<th>&nbsp;</th>
<th>A</th>
<th>B</th>
</tr>
</tbody>
<tbody id="lig2">
<tr>
<th>1</th>
<td>A1</td>
<td>B1</td>
</tr>
</tbody>
<tbody id="lig3">
<tr>
<th>2</th>
<td>A2</td>
<td>B2</td>
</tr>
</tbody>
</table>
<a href="#"
onclick="document.getElementById('col2').style.dis play='';return
false">Afficher la colonne A</a>&nbsp;/&nbsp;<a href="#"
onclick="document.getElementById('col2').style.dis play='none';return
false">Masquer la colonne A</a><br />
<a href="#"
onclick="document.getElementById('lig2').style.dis play='';return
false">Afficher la ligne 1</a>&nbsp;/&nbsp;<a href="#"
onclick="document.getElementById('lig2').style.dis play='none';return
false">Masquer la ligne 1</a>
</body>
</html>

--
______
Francis (enlever .NIPUBNISOUMIS)
"La dinde est tolérante, mais elle déteste les farceurs"

Il se trouve que Francis Spiesser a formulé :

> Tu peux aussi voir au niveau des tbody pour afficher/masquer des blocs de
> ligne. Pour les colonnes ça se complique parce que certains styles ne
> fonctionnent pas dans les colgroup.
> A mon avis, ce serait plus facile d'y arriver avec une matrice de div
> habilement nommées
> [ id=C1-R1 ][ id=C2-R1 ]...[ id=Cn-R1 ]
> [ id=C1-R2 ][ id=C2-R2 ]...[ id=Cn-R2 ]
> ...
> [ id=C1-Rn ][ id=C2-Rn ]...[ id=Cn-Rn ]

Sinon le code ci-dessous fonctionne dans IE mais pas dans FF (pour la
colonne)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Document sans nom</title>
</head>

<body><table width="200" border="1">
<colgroup span="1"><col id="col1" /></colgroup>
<colgroup span="1"><col id="col2" /></colgroup>
<colgroup span="1"><col id="col3" /></colgroup>
<tbody id="lig1">
<tr>
<th>&nbsp;</th>
<th>A</th>
<th>B</th>
</tr>
</tbody>
<tbody id="lig2">
<tr>
<th>1</th>
<td>A1</td>
<td>B1</td>
</tr>
</tbody>
<tbody id="lig3">
<tr>
<th>2</th>
<td>A2</td>
<td>B2</td>
</tr>
</tbody>
</table>
<a href="#"
onclick="document.getElementById('col2').style.dis play='';return
false">Afficher la colonne A</a>&nbsp;/&nbsp;<a href="#"
onclick="document.getElementById('col2').style.dis play='none';return
false">Masquer la colonne A</a><br />
<a href="#"
onclick="document.getElementById('lig2').style.dis play='';return
false">Afficher la ligne 1</a>&nbsp;/&nbsp;<a href="#"
onclick="document.getElementById('lig2').style.dis play='none';return
false">Masquer la ligne 1</a>
</body>
</html>

--
______
Francis (enlever .NIPUBNISOUMIS)
"La dinde est tolérante, mais elle déteste les farceurs"

Une petite précision suite à ma réponse.

Le 29/06/2007 16:43, je répondais à Toto :
>>
>> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
>> offrant la possibilité de plier/déplier certaines parties (lignes ou
>> colonnes) avec sous totaux à la manière du mode plan d'Excel.
>
> document.getElementById("total").style.display = ""; /* montrer */

Très important : pour un élément de tableau, ne surtout pas positionner
la valeur de display à autre chose que "none" ou "". La positionner à
"block" par exemple devrait fonctionner dans IE6 mais pas dans les
navigateurs respectueux des standards. Inversement, la positionner à
"table-row" pour un <tr> ne fonctionnera pas dans IE6.

Une petite précision suite à ma réponse.

Le 29/06/2007 16:43, je répondais à Toto :
>>
>> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
>> offrant la possibilité de plier/déplier certaines parties (lignes ou
>> colonnes) avec sous totaux à la manière du mode plan d'Excel.
>
> document.getElementById("total").style.display = ""; /* montrer */

Très important : pour un élément de tableau, ne surtout pas positionner
la valeur de display à autre chose que "none" ou "". La positionner à
"block" par exemple devrait fonctionner dans IE6 mais pas dans les
navigateurs respectueux des standards. Inversement, la positionner à
"table-row" pour un <tr> ne fonctionnera pas dans IE6.

Olivier Miakinen <om+news@miakinen.net> wrote:

> Le 29/06/2007 10:54, Toto a écrit :
> >
> > Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
> > offrant la possibilité de plier/déplier certaines parties (lignes ou
> > colonnes) avec sous totaux à la manière du mode plan d'Excel.
> > Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
> > une solution.
>
> Pour une ligne, c'est facile. La ligne que tu veux cacher, mettons
> qu'elle ait l'id "total", tu peux faire :
> document.getElementById("total").style.display = "none"; /* cacher */
> document.getElementById("total").style.display = ""; /* montrer */
>
> Pour une colonne, c'est un peu plus complexe car tu dois faire ça pour
> chaque <th> et <td>, un par ligne. Mais bon, ça se fait aussi.


J'ai fait un truc comme ça, le mieux est de virer les lignes dans un
tableau bis, et de les remettre après

Faudrait que je mettes une belle license pour le code et que je le
publie...

FiLH


--
Le fondement du constat bourgeois, c'est le bon sens, c'est-à-dire
une vérité qui s'arrête sur l'ordre arbitraire de celui qui la parle.
Roland Barthes.
http://www.filh.org

Olivier Miakinen <om+news@miakinen.net> wrote:

> Le 29/06/2007 10:54, Toto a écrit :
> >
> > Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
> > offrant la possibilité de plier/déplier certaines parties (lignes ou
> > colonnes) avec sous totaux à la manière du mode plan d'Excel.
> > Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
> > une solution.
>
> Pour une ligne, c'est facile. La ligne que tu veux cacher, mettons
> qu'elle ait l'id "total", tu peux faire :
> document.getElementById("total").style.display = "none"; /* cacher */
> document.getElementById("total").style.display = ""; /* montrer */
>
> Pour une colonne, c'est un peu plus complexe car tu dois faire ça pour
> chaque <th> et <td>, un par ligne. Mais bon, ça se fait aussi.


J'ai fait un truc comme ça, le mieux est de virer les lignes dans un
tableau bis, et de les remettre après

Faudrait que je mettes une belle license pour le code et que je le
publie...

FiLH


--
Le fondement du constat bourgeois, c'est le bon sens, c'est-à-dire
une vérité qui s'arrête sur l'ordre arbitraire de celui qui la parle.
Roland Barthes.
http://www.filh.org

Toto a écrit :
> Bonjour,
>
> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
> offrant la possibilité de plier/déplier certaines parties (lignes ou
> colonnes) avec sous totaux à la manière du mode plan d'Excel.

Il faudrait déjà avoir un aperçu du table.
Et comprendre ce que tu entends par "mode plan" (quoi voir? les TH?)
Et les sous-totaux ? où sont-ils ?

function $(tablo) {
tablo = document.getElementById(tablo);
return tablo.getElementsByTagName('TBODY')[0];
}
function montabl(tablo) { // array du table
var tabl = [];
var r = $(tablo).rows;
for (var i=0; i<r.length; i++) {
var c = r[i].cells;
tabl[i] = [];
for(var j=0; j<c.length; i++)
tabl[i][j] = c[i];
}
return tabl;
}

// cacher/montrer une rangée, une colonne
function montrecache(tablo, rang, col) {
if(typeof(rang)!='undefined' && rang.length>0) {
var R = $(tablo).rows[rang].style;
R.display = R.display==''? 'none' : '';
}
if(typeof(col)!='undefined' && col.length>0) {
var T = montabl(tablo);
for(var i=0; i<T.length; i++) {
var C = T[i][col].style;
C.display = C.display==''? 'none' : '';
}
}
}


Exemple pour mode plan :

<html>
<script type="text/javascript">
function $(tablo) {
tablo = document.getElementById(tablo);
return tablo.getElementsByTagName('TBODY')[0];
}
function modeplan(tablo) {
var T = $(tablo).getElementsByTagName('TD');
for(var i=0; i<T.length; i++) {
var C = T[i].style;
C.display = C.display==''? 'none' : '';
}
}
function total(tablo) {
var T = $(tablo).rows;
var S = 0;
for(var i=1; i<T.length-1; i++) {
var R = T[i].cells;
var ss = R[1].getElementsByTagName('INPUT')[0].value;
if(ss && ss.length>0) {
ss = ss.toString().replace(',','.')*R[2].innerHTML.replace(',','.');
S += ss;
R[3].innerHTML = ss.toString().replace('.',',');
}
}
T[T.length-1].cells[1].innerHTML = ss.toString().replace('.',',');
}
onload = function() {
var T = $("monTabl").getElementsByTagName('INPUT');
for(var i=0; i<T.length; i++) {
T[i].size = 5;
T[i].onchange = function() { total('monTabl'); };
}
}
</script>
<form action="bla.php">
<table id="monTabl" border=1 cellspacing=2>
<tr class=titre>
<th>article</th><td>quant</td><td>px U</td><th>ss-tot</th>
</tr>
<tr>
<th>item 1</th><td><input name="q01"></td><td>2,5</td><th></th>
</tr>
<tr>
<th>item 2</th><td><input name="q02"></td><td>4,5</td><th></th>
</tr>
<tr>
<th>item 3</th><td><input name="q03"></td><td>5,2</td><th></th>
</tr>
<tr>
<th>total</th><th colspan=3></th>
</tr>
</table>
<p><a href="javascript:modeplan('monTabl')">mode plan</a></p>
</form>
</html>

--
Stephane Moriaux et son (moins) vieux Mac

Olivier Miakinen a écrit :
> Très important : pour un élément de tableau, ne surtout pas positionner
> la valeur de display à autre chose que "none" ou "". La positionner à
> "block" par exemple devrait fonctionner dans IE6 mais pas dans les
> navigateurs respectueux des standards. Inversement, la positionner à
> "table-row" pour un <tr> ne fonctionnera pas dans IE6.

C'est pour ça que j'ai pris le parti de ne *jamais* utiliser
style.display mais plutôt d'utiliser le className de l'élément avec une
définition très simple.

..cacher { display:none }

Ainsi, pour cacher un élément il suffit d'y ajouter la classe "cacher"
et pour le faire réapparaitre il faut simplement enlever cette classe.
Sans jamais me soucier des considération capilotractées du type
d'élément à faire apparaitre selon le type de navigateur.

--
laurent

Olivier Miakinen a écrit :
> Très important : pour un élément de tableau, ne surtout pas positionner
> la valeur de display à autre chose que "none" ou "". La positionner à
> "block" par exemple devrait fonctionner dans IE6 mais pas dans les
> navigateurs respectueux des standards. Inversement, la positionner à
> "table-row" pour un <tr> ne fonctionnera pas dans IE6.

C'est pour ça que j'ai pris le parti de ne *jamais* utiliser
style.display mais plutôt d'utiliser le className de l'élément avec une
définition très simple.

..cacher { display:none }

Ainsi, pour cacher un élément il suffit d'y ajouter la classe "cacher"
et pour le faire réapparaitre il faut simplement enlever cette classe.
Sans jamais me soucier des considération capilotractées du type
d'élément à faire apparaitre selon le type de navigateur.

--
laurent

Le 30/06/2007 01:15, Laurent vilday a écrit :
>
>> Très important : pour un élément de tableau, ne surtout pas positionner
>> la valeur de display à autre chose que "none" ou "". La positionner à
>> "block" par exemple devrait fonctionner dans IE6 mais pas dans les
>> navigateurs respectueux des standards. Inversement, la positionner à
>> "table-row" pour un <tr> ne fonctionnera pas dans IE6.
>
> C'est pour ça que j'ai pris le parti de ne *jamais* utiliser
> style.display mais plutôt d'utiliser le className de l'élément avec une
> définition très simple.
>
> .cacher { display:none }

C'est aussi une méthode. Mais utiliser les valeurs "none" et "" dans
style.display marche tout aussi bien. Sans compter qu'il est plus facile
de positionner une valeur à "none" ou "" que de rajouter ou supprimer
une classe à des éléments qui parfois en contiennent déjà, parfois non.

> Ainsi, pour cacher un élément il suffit d'y ajouter la classe "cacher"
> et pour le faire réapparaitre il faut simplement enlever cette classe.
> Sans jamais me soucier des considération capilotractées du type
> d'élément à faire apparaitre selon le type de navigateur.

Je prends un exemple extrême :
class="Dupond Martin Lacacherie Miakinen Vilday"

Il faut un code pas trop stupide pour détecter que "cacher" ne fait pas
partie de la liste des classes et qu'on peut le rajouter, et surtout
qu'il ne faut pas le supprimer. C'est faisable, bien sûr, mais ça reste
moins simple que « style.display="none" » et « style.display="" ».

Le 30/06/2007 01:15, Laurent vilday a écrit :
>
>> Très important : pour un élément de tableau, ne surtout pas positionner
>> la valeur de display à autre chose que "none" ou "". La positionner à
>> "block" par exemple devrait fonctionner dans IE6 mais pas dans les
>> navigateurs respectueux des standards. Inversement, la positionner à
>> "table-row" pour un <tr> ne fonctionnera pas dans IE6.
>
> C'est pour ça que j'ai pris le parti de ne *jamais* utiliser
> style.display mais plutôt d'utiliser le className de l'élément avec une
> définition très simple.
>
> .cacher { display:none }

C'est aussi une méthode. Mais utiliser les valeurs "none" et "" dans
style.display marche tout aussi bien. Sans compter qu'il est plus facile
de positionner une valeur à "none" ou "" que de rajouter ou supprimer
une classe à des éléments qui parfois en contiennent déjà, parfois non.

> Ainsi, pour cacher un élément il suffit d'y ajouter la classe "cacher"
> et pour le faire réapparaitre il faut simplement enlever cette classe.
> Sans jamais me soucier des considération capilotractées du type
> d'élément à faire apparaitre selon le type de navigateur.

Je prends un exemple extrême :
class="Dupond Martin Lacacherie Miakinen Vilday"

Il faut un code pas trop stupide pour détecter que "cacher" ne fait pas
partie de la liste des classes et qu'on peut le rajouter, et surtout
qu'il ne faut pas le supprimer. C'est faisable, bien sûr, mais ça reste
moins simple que « style.display="none" » et « style.display="" ».

Olivier Miakinen a écrit :
> Le 30/06/2007 01:15, Laurent vilday a écrit :
>>> Très important : pour un élément de tableau, ne surtout pas positionner
>>> la valeur de display à autre chose que "none" ou "". La positionner à
>>> "block" par exemple devrait fonctionner dans IE6 mais pas dans les
>>> navigateurs respectueux des standards. Inversement, la positionner à
>>> "table-row" pour un <tr> ne fonctionnera pas dans IE6.
>> C'est pour ça que j'ai pris le parti de ne *jamais* utiliser
>> style.display mais plutôt d'utiliser le className de l'élément avec une
>> définition très simple.
>>
>> .cacher { display:none }
>
> C'est aussi une méthode. Mais utiliser les valeurs "none" et "" dans
> style.display marche tout aussi bien.

Je n'ai absolument pas dit le contraire

Mais je ne vois toujours passer que la solution du style.display hors
comme j'utilise une autre méthode, j'en profitais pour rebondir sur ton
alerte

> Sans compter qu'il est plus facile
> de positionner une valeur à "none" ou "" que de rajouter ou supprimer
> une classe à des éléments qui parfois en contiennent déjà, parfois non.

Possible oui. Sauf par exemple quand on a un élément inline (que tu ne
contrôles pas) avec un style.display = 'block', qu'on le cache puis
l'affiche et que ohh ohh, le layout a changé...

> Je prends un exemple extrême :
> class="Dupond Martin Lacacherie Miakinen Vilday"
>
> Il faut un code pas trop stupide pour détecter que "cacher" ne fait pas
> partie de la liste des classes et qu'on peut le rajouter, et surtout
> qu'il ne faut pas le supprimer. C'est faisable, bien sûr, mais ça reste
> moins simple que « style.display="none" » et « style.display="" ».

Moins simple c'est possible, et encore mon expérience tend à me faire
penser l'inverse. Car contrairement a style.display, la solution par une
classe garantie une prise de tête égale à zéro sur *tous* les cas
possibles et ce quel que soit le navigateur.

function hasCSS(elt, cName)
{
var c;
if ( !elt || !elt.className ) { return false; }
c = elt.className.split(' ');
return c.indexOf(cName) != -1;
}

function isVisible(elt) { return !hasCSS(elt, 'cacher'); }

Le problème ici, c'est que Array.prototype.indexOf c'est du JS1.6 je
crois et donc si on le veut partout (IE6, Opéra et autres), ben faut se
l'implémenter à la main.

Allez, je suis trop bon , voila ce que j'utilise :

if ( !Array.prototype.indexOf )
{
Array.prototype.indexOf = function(o, from)
{
if ( !from ) { from = 0; }
else if ( from < 0 ) { from = Math.max(0, this.length + from); }
for ( var i = from, m = this.length; i < m; i++ )
{
if ( this[i] === o ) { return i; }
}
return -1;
};
}

Et au pire, si on veut pas s'embêter avec [].indexOf, on peut toujours
passer par un truc plus générique : les Regexps

function hasCSS(elt, cName)
{
var r;
if ( !elt || !elt.className ) { return false; }
r = new RegExp("(^|\\s)" + cName + "(\\s|$)");
return r.test(elt.className);
}

--
laurent

Le 30/06/2007 11:54, Laurent vilday a écrit :
>
>> Sans compter qu'il est plus facile
>> de positionner une valeur à "none" ou "" que de rajouter ou supprimer
>> une classe à des éléments qui parfois en contiennent déjà, parfois non.
>
> Possible oui. Sauf par exemple quand on a un élément inline (que tu ne
> contrôles pas) avec un style.display = 'block', qu'on le cache puis
> l'affiche et que ohh ohh, le layout a changé...

Il me semble que ça ne pourrait arriver que si tu positionnes le
display à 'block' en JavaScript et pas s'il est positionné en CSS.
Or je n'arrive pas à imaginer un seul cas dans lequel cela pourrait
être utile (par opposition à « tordu »). En outre, si vraiment tu
arrives à imaginer un tel cas, alors on peut supposer que tu saches
quelle valeur tu as mise. Et pour faire bonne mesure, il suffit
alors de le sauver au moment de le mettre à 'none' :

hide() {
if (this.style.display != 'none') {
this.saveDisplay = this.style.display;
this.style.display = 'none';
}
}

show() {
/* il faut peut-être verifier que this.saveDisplay est défini */
this.style.display = this.saveDisplay;
}

Je me trompe ?

Olivier Miakinen a écrit :
> Le 30/06/2007 11:54, Laurent vilday a écrit :
>>> Sans compter qu'il est plus facile
>>> de positionner une valeur à "none" ou "" que de rajouter ou supprimer
>>> une classe à des éléments qui parfois en contiennent déjà, parfois non.
>> Possible oui. Sauf par exemple quand on a un élément inline (que tu ne
>> contrôles pas) avec un style.display = 'block', qu'on le cache puis
>> l'affiche et que ohh ohh, le layout a changé...
>
> Il me semble que ça ne pourrait arriver que si tu positionnes le
> display à 'block' en JavaScript et pas s'il est positionné en CSS.
> Or je n'arrive pas à imaginer un seul cas dans lequel cela pourrait
> être utile (par opposition à « tordu »). En outre, si vraiment tu
> arrives à imaginer un tel cas, alors on peut supposer que tu saches
> quelle valeur tu as mise. Et pour faire bonne mesure, il suffit
> alors de le sauver au moment de le mettre à 'none' :
>
> hide() {
> if (this.style.display != 'none') {
> this.saveDisplay = this.style.display;
> this.style.display = 'none';
> }
> }
>
> show() {
> /* il faut peut-être verifier que this.saveDisplay est défini */
> this.style.display = this.saveDisplay;
> }
>
> Je me trompe ?

Dans le même genre :

showHide(quoiId) {
quoiId = document.getElementById(quoiId);
var old = typeof(quoiId.saveDisplay)!='undefined'?
quoiId.saveDisplay : quoiId.style.display;
quoiId.style.display = quoiId.style.display==old? 'none' : old;
quoiId.saveDisplay = old;
}

ou :

showHide(quoiId) {
quoiId = document.getElementById(quoiId);
if(typeof(quoiId.saveDisplay)=='undefined')
quoiId.saveDisplay = quoiId.style.display;
quoiId.style.display = quoiId.style.display==quoiId.saveDisplay?
'none' : quoiId.saveDisplay;
}



--
Stephane Moriaux et son (moins) vieux Mac

Olivier Miakinen a écrit :
> Le 30/06/2007 11:54, Laurent vilday a écrit :
>>> Sans compter qu'il est plus facile
>>> de positionner une valeur à "none" ou "" que de rajouter ou supprimer
>>> une classe à des éléments qui parfois en contiennent déjà, parfois non.
>> Possible oui. Sauf par exemple quand on a un élément inline (que tu ne
>> contrôles pas) avec un style.display = 'block', qu'on le cache puis
>> l'affiche et que ohh ohh, le layout a changé...
>
> Il me semble que ça ne pourrait arriver que si tu positionnes le
> display à 'block' en JavaScript et pas s'il est positionné en CSS.
> Or je n'arrive pas à imaginer un seul cas dans lequel cela pourrait
> être utile (par opposition à « tordu »). En outre, si vraiment tu
> arrives à imaginer un tel cas, alors on peut supposer que tu saches
> quelle valeur tu as mise. Et pour faire bonne mesure, il suffit
> alors de le sauver au moment de le mettre à 'none' :
>
> hide() {
> if (this.style.display != 'none') {
> this.saveDisplay = this.style.display;
> this.style.display = 'none';
> }
> }
>
> show() {
> /* il faut peut-être verifier que this.saveDisplay est défini */
> this.style.display = this.saveDisplay;
> }
>
> Je me trompe ?

Dans le même genre :

showHide(quoiId) {
quoiId = document.getElementById(quoiId);
var old = typeof(quoiId.saveDisplay)!='undefined'?
quoiId.saveDisplay : quoiId.style.display;
quoiId.style.display = quoiId.style.display==old? 'none' : old;
quoiId.saveDisplay = old;
}

ou :

showHide(quoiId) {
quoiId = document.getElementById(quoiId);
if(typeof(quoiId.saveDisplay)=='undefined')
quoiId.saveDisplay = quoiId.style.display;
quoiId.style.display = quoiId.style.display==quoiId.saveDisplay?
'none' : quoiId.saveDisplay;
}



--
Stephane Moriaux et son (moins) vieux Mac

> Et au pire, si on veut pas s'embêter avec [].indexOf, on peut toujours
> passer par un truc plus générique : les Regexps
>
> function hasCSS(elt, cName)
> {
> var r;
> if ( !elt || !elt.className ) { return false; }
> r = new RegExp("(^|\\s)" + cName + "(\\s|$)");
> return r.test(elt.className);
> }


pour la regexp, j'aurais plutot utiliser :
"\\b" + cName + "\\b"

Me trompe-je ?

--
Isammoc

Bonjour à Toto <eloustau@hotmail.fr> qui nous a écrit :
> Bonjour,
>
> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes)
> en offrant la possibilité de plier/déplier certaines parties (lignes
> ou colonnes) avec sous totaux à la manière du mode plan d'Excel.
> Du coté serveur (PHP) je peux gérer. C'est du coté client que je
> recherche une solution.
> Merci.
> Et bon WE.

Je veux juste vous parler de mon expérience.

J'ai réalisé l'année dernière une grille (Javascript, Ajax,...)
permettant de gérer le plié/déplié en ligne et en colonne. Un peu du
type du produit DynamiCube mais, lui, fonctionne exclusivement avec un
ActiveX donc limité à IE.

Je ne peux fournir de source ou d'algo ici car je l'ai développé pour ma
boîte, mais je peux fournir quelques indications intéressantes :

* L'algo inclut une partie récursive qui fonctionne très bien avec
JavaScript
* Les premiers développements ont été basés sur le DOM avec un objet
Table etc...Les tests sous FF avec plusieurs milliers de cellules ont
été concluants ; par contre, IE met un temps considérable à gérer de
gros objets DOM.
* Les seconds essais ont été basés sur la construction d'une chaîne Html
contenant les balises <table>, <td>,... puis de la mettre simplement
dans un élément DIV par innerHTML. Sous FF, les temps sont du même ordre
que avec DOM ; par contre, avec IE et cette technique, les temps
deviennent comparables à ceux de FF.

Il est facile de faire des tests pour vérifier mes dires et ne pas se
lancer dans du DOM qui risque de ne pas convenir pour de gros volumes.
Enfin, à vous de voir...

Dernier truc pour les longues chaînes de caractères :

Au lieu de:

var s = "";
(boucle) {
s += contenu_inferieur_a_4K;
}
html = s;

Faire :

var t = [];
(boucle) {
t.push(contenu_inferieur_a_4K);
}
html = t.join('');

C'est beaucoup plus efficace pour les volumes importants !...

--
Cordialement, Thierry ;-)

Bonjour à Toto <eloustau@hotmail.fr> qui nous a écrit :
> Bonjour,
>
> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes)
> en offrant la possibilité de plier/déplier certaines parties (lignes
> ou colonnes) avec sous totaux à la manière du mode plan d'Excel.
> Du coté serveur (PHP) je peux gérer. C'est du coté client que je
> recherche une solution.
> Merci.
> Et bon WE.

Je veux juste vous parler de mon expérience.

J'ai réalisé l'année dernière une grille (Javascript, Ajax,...)
permettant de gérer le plié/déplié en ligne et en colonne. Un peu du
type du produit DynamiCube mais, lui, fonctionne exclusivement avec un
ActiveX donc limité à IE.

Je ne peux fournir de source ou d'algo ici car je l'ai développé pour ma
boîte, mais je peux fournir quelques indications intéressantes :

* L'algo inclut une partie récursive qui fonctionne très bien avec
JavaScript
* Les premiers développements ont été basés sur le DOM avec un objet
Table etc...Les tests sous FF avec plusieurs milliers de cellules ont
été concluants ; par contre, IE met un temps considérable à gérer de
gros objets DOM.
* Les seconds essais ont été basés sur la construction d'une chaîne Html
contenant les balises <table>, <td>,... puis de la mettre simplement
dans un élément DIV par innerHTML. Sous FF, les temps sont du même ordre
que avec DOM ; par contre, avec IE et cette technique, les temps
deviennent comparables à ceux de FF.

Il est facile de faire des tests pour vérifier mes dires et ne pas se
lancer dans du DOM qui risque de ne pas convenir pour de gros volumes.
Enfin, à vous de voir...

Dernier truc pour les longues chaînes de caractères :

Au lieu de:

var s = "";
(boucle) {
s += contenu_inferieur_a_4K;
}
html = s;

Faire :

var t = [];
(boucle) {
t.push(contenu_inferieur_a_4K);
}
html = t.join('');

C'est beaucoup plus efficace pour les volumes importants !...

--
Cordialement, Thierry ;-)

Toto <eloustau@hotmail.fr> wrote:

> Bonjour,
>
> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
> offrant la possibilité de plier/déplier certaines parties (lignes ou
> colonnes) avec sous totaux à la manière du mode plan d'Excel.
> Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
> une solution.

Sinon j'ai ça :

http://uuu.enseirb.fr/~goudal/Tables/

FiLH

--
Le fondement du constat bourgeois, c'est le bon sens, c'est-à-dire
une vérité qui s'arrête sur l'ordre arbitraire de celui qui la parle.
Roland Barthes.
http://www.filh.org

Toto <eloustau@hotmail.fr> wrote:

> Bonjour,
>
> Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
> offrant la possibilité de plier/déplier certaines parties (lignes ou
> colonnes) avec sous totaux à la manière du mode plan d'Excel.
> Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
> une solution.

Sinon j'ai ça :

http://uuu.enseirb.fr/~goudal/Tables/

FiLH

--
Le fondement du constat bourgeois, c'est le bon sens, c'est-à-dire
une vérité qui s'arrête sur l'ordre arbitraire de celui qui la parle.
Roland Barthes.
http://www.filh.org