[Performance] Afficher/Masquer une colonne

Version imprimable

24/06/2011, 21h36
Rctiste

[Performance] Afficher/Masquer une colonne

Bonjour à tous,

Vous allez surement vous dire que c'est du vu et du re-vu mais mon problème ce n'est pas d'afficher ou de masquer les colonnes, j'utilise un simple :

Code:

getElementById('id').style.display = "none"

dans une boucle for.

Le problème c'est que je dois masquer une colonne pour un tableau d'environ 2000 lignes (minimum) et le fait d'utiliser cette boucle me prend à peut près 30 secondes pour tout afficher.

Je me demandais si il n'y aurait pas une autre solution plus rapide?
J'ai fait le tour de beaucoup de solutions mais aucune ne ralenti vraiment le temps d'affichage.

Merci d'avance

salut

1ère optimisation : ne pas faire getElementById à chaque fois...

par exemple à la fin du chargement de ta page :
Code:

1 2 3 4 5 6 7 8 var elts = []; for (ma boucle){ elts.push(document.getElementById('mon_id' + i)); } /* tu remplis le tableau comme tu veux. si tu utilises jQuery c'est encore plus simple, elts = $('.toto') avec toto un css que tu mets sur les éléments à masquer/afficher, ou tu peux choisir un autre sélecteur */
par la suite tu boucles sur le tableaux des éléments, ce qui peut être 'achement plus rapide si le DOM de ta page est gros.

24/06/2011, 22h04
Rctiste

Merci beaucoup de cette réponse rapide,

Je ne vois pas trop comment utiliser ta var elts :oops:

Code:

1
2
3
4
5
6
7
8
function toggle(show){
  var i, n;
  for (i=0, n=elts.length; i<n; i++){
    elts[i].style.display = show ? null : "none"; 
   // ou "block" ou "inline" à la place de null
   // suivant ce que tu veux
  }
}

24/06/2011, 22h13
Rctiste

Oki, je comprend beaucoup mieux, je test ça dès que je peut et je vous tient au courant.

Merci beaucoup !

Voici un script vraiment performant (environ 1s a la place des 30 du départ) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var etat=1;
    var i;
    var affBlock= "block";
    var affNone= "none";
 
    function affichageCheckbox() {
 
        var lstIdCheckbox= document.getElementsByName("id_checkbox");
        var nombreLigne= checkbox.length;
 
        if (etat == 1) {
            for (i=0; i<(nombreLigne); i++) {
                lstIdCheckbox[i].style.display = affBlock;
            }
            etat=0;
        } else {
            for (i=0; i<(nombreLigne); i++) {
                lstIdCheckbox[i].style.display = affNone;
            }
            etat=1;
        }
    }

Voila j'espere que sa aidera du monde !!!

27/06/2011, 13h47
Bovino

Code:

var affBlock= "block";

attention, une cellule de tableau n'est pas de type bloc mais table-cell !
Si le style CSS (donc défini dans un fichier CSS ou entre balises <style>) n'est pas à none, il est préférable de passer par une chaine vide :

Code:

var affBlock= "";

sinon, ça devient un peu plus compliqué puisque table-cell n'est pas une valeur reconnue par tous les navigateurs. Dans ce cas, je te conseillerais plus d'alterner entre deux noms de classe en remplaçant

Code:

lstIdCheckbox[i].style.display = affBlock;

par

Code:

lstIdCheckbox[i].className = 'affBlock';

et dans ta feuille de style, tu affecterais ou non le display none.
27/06/2011, 19h39
Rctiste

Oki je ne savais pas, merci de la remarque ;)