visibility:collapse

Billet

Je viens de me rendre compte que la propriété CSS visibility acceptait trois arguments, visible, hidden (ces deux là on les connait tous) et ... collapse. Visibility:collapse est destiné aux cellules et colonnes de tableaux.

J'ai trouvé un intérêt à visibility:collapse, ça peut me permettre d'extraire un tableau de données et de se faire un petit système de sélection des données affichées sans faire une demande serveur supplémentaire. J'ai fait un petit essai et ça marche, j'ai dû me documenter un peu en javascript car je suis une bille dans ce langage. L'idée que j'ai eue c'est d'associer des classes aux lignes comme des marqueurs, puis de récupérer toutes les lignes dans un tableau et de passer en visibility:collapse les lignes ayant une certaine classe. Ca marche bien, c'est assez simple d'utilisation finalement, voici un exemple :

exemple visibility:collapse et getElementsByTagName

Je le dis tout de suite, ça ne marche pas du tout dans IE. Dans Opera il ne fait que faire disparaître les lignes comme un visibility:hidden.

Mise à jour : Firefox 1.0 se comporte comme Opera, mal. Par contre ça marche du tonnerre avec Mozilla suite 1.8a5 ;)

Commentaires

1. Le mardi 7 décembre 2004, 10:42 par LaurentJ

pour ton javascript, il y a plus simple de modifier les styles de tes elements. plutot que de parcourir tout les élements, il est plus rapide de modifier directement la feuille de style.

avec la feuille de style suivante :

Table {border-collapse:collapse;}
td {border:1px solid black;}
.foo1 {visibility: visible; color:red;}
.foo2 {visibility: visible; color:blue;}

Ça donne :

function collapseEl(id,etat,classe) {
var i; //i= index de la déclaration de la classe dans la feuille de style
if(classe=='foo1') i = 2;
if(classe=='foo2') i = 3;

var rule = document.styleSheets[0].cssRules[i];
if(etat)
rule.style.visibility='visible';
else
rule.style.visibility='collapse';

}

2. Le mardi 7 décembre 2004, 10:59 par LaurentJ

le visiblity:collapse ne fonctionne que dans la suite Mozilla 1.8 apparement

3. Le mardi 7 décembre 2004, 12:07 par pascal

Merci pour le tuyau, je note :)