Collapse de lignes de tables

Version imprimable

1 pièce(s) jointe(s)

Bonjour

J'ai implémenté une fonction me permettant de masquer des lignes de tableaux sauf la première pour une catégorie donnée.
L'implémentation fonctionne très bien sous IE, Firefox et Chrome:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
function collapseLines(table_id, collapse_button_id, req_id, rowspan_value){
    var button = document.getElementById(collapse_button_id);
    var rows = document.getElementById(table_id).rows;
    var action = false;
    var count = 0;
    if(button.value=='-'){
        button.value='+';
        var collapse = true;
    }
    else{
        button.value='-';
        collapse = false;
    }
    for(var i=0; i<rows.length; i++){
        if(rows[i].id == "first_"+req_id){
            action = true;
        }
        else{
            if(action){
                if(count<rowspan_value-1){
                    collapse?rows[i].style.display = 'none' : rows[i].style.display = 'table-row';
                    count++;
                }
                else{
                    action = false;
                }
            }
        }
    }
    var first_line_tds = document.getElementsByName(req_id);
    for(i=0; i<first_line_tds.length; i++){
        collapse? first_line_tds[i].rowSpan = null : first_line_tds[i].rowSpan = rowspan_value;
    }
}

Seulement, et seulement sous IE (v8), lorsque je collapse, je remarque le "paté" suivant (cf image jointe).
Y aurait-il un problème de style ?
Comment contourner ce problème apapremment existant seulement pour IE ?

Merci d'avance de vos solutions.

@++

22/11/2010, 16h01
SpaceFrog

essaye de rajouter un line-height et un font-size à 0

Salut SpaceFrog

J'ai appliqué ce que tu indiquais:
Code:

1 2 3 4 5 6 7 8 9 if(collapse){ rows[i].style.display = 'none'; rows[i].style.lineHeight = 0; rows[i].style.fontSize = 0; } else{ rows[i].style.display = 'table-row'; }
Malheureusement, le problème reste le même sous IE.
Merci en tout cas de ta réponse.

@++

22/11/2010, 16h12
SpaceFrog

heu a vrai dire .. il est ou le paté ...
quel est le bug d'affichage ? on pourrait voir le rendu sous ffx ?
22/11/2010, 16h27
GLDavid

Hello SapceFrog

Je te prépare ça dès que possible. Je ferais une image dans mon prochain post du rendu "collapsé" avec FF.
Le rendu IE est dans mon premier post.

@++
22/11/2010, 16h39
GLDavid

1 pièce(s) jointe(s)

Hello SpaceFrog

Voici comme demandé le rendu "collapsé" sous Firefox.
Si tu compares avec l'image de mon premier post sous IE, tu verras que sous IE, j'ai une sorte de bloc coloré uniformément apparaissant lors du collapse, chose que je n'ai pas avec Firefox.
Merci encore de ton aide.

@++
22/11/2010, 16h42
SpaceFrog

les display sont ils initialisés dans le code au départ ?
22/11/2010, 16h44
GLDavid

Hello

Non, les displays ne sont pas initialisés.

@++
22/11/2010, 16h45
SpaceFrog

initialise les pour voir ?
22/11/2010, 16h47
GLDavid

J'ai essayé, ben, c'est pareil :?
Je me demande si la feuille de style ne viendrait pas jouer les troubles-fêtes.

@++
22/11/2010, 16h54
Bovino

Je pense que tu devrais regrouper tes différents blocs dans des tbody différents et faire varier le display des tbody.

Pour info, IE est un très mauvais élève pour ce qui est des modifications de rendu des tables.
22/11/2010, 18h25
Watilin
Je pense qu’IE ne connaît pas les valeurs table-* et se sent tout con quand il doit les traiter. Essaye avec juste block. Ça va rendre le script un peu plus complexe car il faudra détecter le type de navigateur…

Moi je vois ça comme ça :
Code:

1 2 3 4 5 6 7 8 9 // au début du script var ROW_DISPLAY = document.all ? 'block' : 'table-row'; // et ensuite rows[i].style.display = collapse ? 'none' : ROW_DISPLAY;
;)
22/11/2010, 19h24
Bovino

Watilin tu as raison, IE ne connait pas table-* en revanche, pour rétablir un display de ce type (pour autant qu'il n'ait pas été définit en none dans le code CSS), le meilleur moyen est de réinitialiser le display :

Code:

rows[i].style.display = collapse ? 'none' : '';

Bonjour à tous

Avant tout, merci à tous pour vos contributions. Ca fait plaisir.
J'ai essayé de mixer vos diverses propositions. Malheureusement, l'effet demeure le même (cf l'image de mon premier post).
J'ai remanié le code Javascript afin de faire plus propre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
function collapse(rows, req_id, action, count, rowspan_value, collapse){
    for(var i=0; i<rows.length; i++){
        if(rows[i].id == "first_"+req_id){
            action = true;
        }
        else{
            if(action){
                if(count<rowspan_value-1){
                    rows[i].style.display = collapse ? 'none' : '';
                    count++;
                }
                else{
                    action = false;
                }
            }
        }
    }
}
 
function changeRowspan(req_id, collapse, rowspan_value){
    var first_line_tds = document.getElementsByName(req_id);
    for(var i=0; i<first_line_tds.length; i++){
        collapse? first_line_tds[i].rowSpan = null : first_line_tds[i].rowSpan = rowspan_value;
    }
}
 
function collapseLines(table_id, collapse_button_id, req_id, rowspan_value){
    var button = document.getElementById(collapse_button_id);
    var rows = document.getElementById(table_id).rows;
    var action = false;
    if(button.value=='-'){
        button.value='+';
        var collapse = true;
    }
    else{
        button.value='-';
        collapse = false;
    }
    collapse(rows, req_id, action, 0, rowspan_value, collapse);
    changeRowspan(req_id, collapse, rowspan_value);
}

Mais le problème reste entier. Je ne comprend pas comment ça se fait. :?
Toute proposition est la bienvenue et merci encore de votre aide.

@++