Discussion :

[GLDavid]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

@++

[SpaceFrog]

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

[GLDavid]

Salut SpaceFrog

J'ai appliqué ce que tu indiquais:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

@++

[SpaceFrog]

heu a vrai dire .. il est ou le paté ...
quel est le bug d'affichage ? on pourrait voir le rendu sous ffx ?

[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.

@++

[GLDavid]

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.

@++

[SpaceFrog]

les display sont ils initialisés dans le code au départ ?

[GLDavid]

Hello

Non, les displays ne sont pas initialisés.

@++

[SpaceFrog]

initialise les pour voir ?

[GLDavid]

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

@++

[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.

[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 JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[GLDavid]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

@++