jquery append dans un table sous ie6

**boo64** · 20/07/2009, 10h50

Bonjour j'essaye de charger des lignes de tableau via ajax mon code marche très bien sous firefox mais aucun résultat sous ie6:

le js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(document).ready(function () {
		$('#ok').click(function()
			{
                $.getJSON('ajax_prog.php',
                    function(data) {
						alert(data);
                        $('tbody').append(data);
                    }
                )
                return false;
            });
});
</script>

le donnée reçu (data) et afficher par alert est du style:
<tr><td>MBR</td> ........ <td></td><tr>

et le html est le suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="tab">
	<table>
		<thead>
			<th>CodeNRA opé</th><th>NomNRA opé</th><th>Dpt</th><th>TV</th><th>BG4</th><th>BG3</th><th>CodeNRA traité</th><th>NomNRA traité</th><th>Maître traité</th><th>Type DSLAM</th><th>Projet</th><th>Cause</th><th>Type opé</th><th>Type upgrade</th><th>NbAccés Ajouté</th><th>Date prog</th><th>MAD dem</th><th>MAD ini</th><th>MAD Réal</th><th>Etat</th><th>Opus</th><th>Commentaires</th><th>A suivre</th><th>Etu/Pil</th><th>Routage</th><th>Constructeur</th><th>NBclients mut</th><th></th><th>DSLAM dest</th><th>Fichier HU</th><th>NbBPN serv</th><th>NbBPN dem</th><th>NbBPN cible</th><th>Materiel</th>
		</thead>
		<tbody><tr></tr>
		</tbody>
	</table>
	</div>

donc je pense que c'est le append qui ne passe pas pour ie6 pour les éléments de type table mais je ne trouve pas de solution pour contourner le probleme

**boo64** · 20/07/2009, 14h29

en incluant le tbody dans le append cela fonctionne :

Code :

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

$('table').append('<tbody>'+data+'</tbody>'

);

**danielhagnoul** · 20/07/2009, 18h49

Bonsoir.

L'une des raisons pour laquelle j'ai placé jQuery sur un piédestal est qu'il se charge en interne des subtilités « javascripttesques» des divers navigateurs. append() étant une commande basique de jQuery, il serait étonnant qu'elle ne passa point partout.

Ayant acté officieusement la mort d'IE7, il m'est difficile de tester IE6

La question que je me pose, peut être votre réponse, à l'époque d'IE6 connaissait-on l'usage des tags <thead>, <tbody> et <tfoot> ?

Une courte recherche avec Google, montre que vous n'êtes pas le premier à observer des problèmes entre <tbody> et IE6.

**boo64** · 21/07/2009, 02h17

oui vous avez surement raison je decouvre jquery et cela me donnerait presque gout au js ....

Ayant acté officieusement la mort d'IE7, il m'est difficile de tester IE6

oui, je sqis bien que ie6 devrait surement être mort ou enterré mais ds un contexte d'entreprise ile st encore fortement present

Cdt
boo

**danielhagnoul** · 21/07/2009, 02h41

Envoyé par boo64

oui, je sqis bien que ie6 devrait surement être mort ou enterré mais ds un contexte d'entreprise ile st encore fortement présent

Tout à fait d'accord, je parlais uniquement de mon point de vue personnel.

Avez-vous testé append() sous IE6 sans les tags <thead>, <tbody> et <tfoot> ?

**boo64** · 21/07/2009, 09h49

Avez-vous testé append() sous IE6 sans les tags <thead>, <tbody> et <tfoot> ?

je viens de tester effectivement cela fonctionne mais autant garder les tbody et thead

**danielhagnoul** · 21/07/2009, 11h00

Bonjour.

Autant garder les tbody et thead ? Pour ne pas avoir une version spéciale pour IE6, je vous comprends. Mais n'oubliez pas que si vous appliquez des CSS aux tbody et thead, ignorés par IE6, il est probable que vous ayez des problèmes de mise en page.

**boo64** · 21/07/2009, 11h24

Envoyé par danielhagnoul

Bonjour.

Autant garder les tbody et thead ? Pour ne pas avoir une version spéciale pour IE6, je vous comprends. Mais n'oubliez pas que si vous appliquez des CSS aux tbody et thead, ignorés par IE6, il est probable que vous ayez des problèmes de mise en page.

tout a fait j'en suis conscient, je vous remercie

**boo64** · 21/07/2009, 12h16

je marque en résolu voici la suite de mes problemes si cela vous interesse

http://www.developpez.net/forums/d78...lisation-json/

**danielhagnoul** · 21/07/2009, 21h41

Bonsoir boo64.

J'ai regardé votre demande pour la création d'une table. Il est tout à fait possible de générer une table avec jQuery, mais 40 colonnes et 10000 lignes, non !

40 colonnes et 100 lignes c'est déjà beaucoup, sur mon ordinateur (P4 3Gh 1Go) C2 est le plus rapide, puis Firefox et IE8 ferme la marche avec 21 secondes. Alors IE6 ?

La solution de pagination que l'on vous a conseillée est certainement la meilleure, l'utilisateur aura déjà un écran bien rempli avec une table de 40 colonnes et 25 à 50 lignes maximum, je pense.

Voici mon exemple :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Manipulations d'une table</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        table.tablesorter {
            width:95%;
            margin:12px auto;
            /* table-layout = problèmes */
            empty-cells:show;
            border-collapse:collapse;
            border-spacing:0px;
            border-width:1px;
            border-style:solid;
            border-color:#666666;
            background-color:#CDCDCD;
            color:#000000;
            font-size:0.9em;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        table.tablesorter caption {
            caption-side:top;
            padding-top:6px;
            padding-bottom:6px;
            text-align:center;
            font-size:1.2em;
            font-style:oblique;
            font-weight:bold;
            line-height:normal;
            letter-spacing:0.2em;
            color:#000000;
        }
        table.tablesorter thead tr th {
            border-width:1px;
            border-style:solid;
            border-color:#999999;
            background-color: #e6eeee;
            color:#000000;
            padding:6px;
            text-align:center;
            font-size:0.9em;
            font-style:normal;
            font-weight:bold;
            line-height:1.8em;
            letter-spacing:normal;
        }
        table.tablesorter tfoot tr th {
            border-width:1px;
            border-style:solid;
            border-color:#999999;
            background-color: #e6eeee;
            color:#000000;
            padding:6px;
            text-align:left;
            font-size:0.9em;
            font-style:italic;
            font-weight:normal;
            line-height:1.4em;
            letter-spacing:normal;
        }
        table.tablesorter thead tr .header {
            background-image:url(../images/bg.gif);
            background-repeat: no-repeat;
            background-position:left;
            cursor: pointer;
        }
        table.tablesorter tbody td {
            border-width:1px;
            border-style:solid;
            border-color:#999999;
            background-color:#FFFFFF;
            color:#000000;
            vertical-align:middle;
            padding:6px;
            text-align:left;
            font-size:0.9em;
            font-style:normal;
            font-weight:normal;
            line-height:1.2em;
            letter-spacing:normal;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
 
            var elClone = $("#affiche").clone(true);
 
                var tdlength = 40;
                var trlength = 100;
 
                var table = $("<table id='maTable' class='tablesorter'></table>").appendTo(elClone);
 
                var thead = $("<thead></thead>").appendTo(table);
                var tfoot = $("<tfoot></tfoot>").appendTo(table);
                var tbody = $("<tbody></tbody>").appendTo(table);
 
                var trhead = $("<tr></tr>").appendTo(thead);
                var trfoot = $("<tr></tr>").appendTo(tfoot);
 
                for(var i = 0; i < tdlength; i++) {
                    $("<th>colonne " + i + "</th>").appendTo(trhead);
                    $("<th>colonne " + i + "</th>").appendTo(trfoot);
                }
 
                var trbody = null;
 
                for(var j = 0; j < trlength; j++) {
                    trbody = $("<tr></tr>").appendTo(tbody);
 
                    for(var i = 0; i < tdlength; i++) {
                        $("<td>ligne " + j + ", colonne " + i + "</td>").appendTo(trbody);
                    }
                }
 
            $("#affiche").replaceWith(elClone);
 
        });
    </script>
</head>
<body>
    <div id="affiche"></div>
</body>
</html>

jquery append dans un table sous ie6

jQuery

Discussions similaires

Partager

Partager