[DOM] IE supprime les "\n " avec innerHTML

**jld33** · 25/03/2008, 15h11

bonjour,
J'ai un tableau qui contient des données avec (parfois) des retour à la ligne
Pour ne pas que les lignes de celui ci s'agrandissent, j'ai formaté le cellules avec le Css suivant:

Code :

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

1
2
3
4
 td {
  overflow:hidden;
  white-space:nowrap;
 }

Pour que l'utilisateur puisse voir le contenu complet (avec les retours à la lignes), j'ai un div avec le Css suivant :

Code :

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

1
2
3
#IdCommentaire{
  white-space:pre; /* indique de prendre le formatage tel quel avec retours à la ligne tabulations etc)*/
}

et une fonction qui affiche dans ce div le contenu de la cellule sur mouseover via la fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
    function show_comment(event) {
      var elt_div = $('IdCommentaire');
      // on récupère qui est à l'origine du show comment
      var elt_td = Event.element(event)
      if (elt_div) {
          elt_div.innerHTML=elt_td.innerHTML
        //elt_div.innerHTML=elt_td.innerHTML.replace('\n','|');
        //elt_div.innerHTML=elt_td.firstChild.nodeValue.replace('\n','|');
      }     
    }

tout ceci marche à merveille sur firefox, mais sur IE aucun retour a la ligne.
Après vérifications le css "white-space:pre;" n'est valable sous IE qu'en mode csscompat (et pas quirks), ce que j'ai pu vérifier sur un cas plus simple.
Mais le pb ne vient pas de là (j'ai essayé aussi de mettre le contenu du div dans une balise <PRE></PRE> sans plus de succès.
En fait, il semble que dès qu'on fait une "copie" d'un élément, IE supprime automatiquement les retours à la ligne (ce que j'ai pu vérifier avec les 2 lignes en commentaires (ou je transforme le '\n' en '|' )--> sous Firefox je vois les | sous IE ...aucun '|' ni '\n'

Au cas où ce serait le innerHTML qui poserait probleme J'ai tenté aussi un

Code :

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

1
2
3
       cloneNode = elt_td.cloneNode(true);
        elt_div.innerHTML="";
        elt_div.appendChild(cloneNode);

et

Code :

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

elt_div.innerHTML=elt_td.firstChild.nodeValue;

Sans plus de succès

Est ce que quelqu'un à une idée, soit de ce qui ne va pas dans mon code soit de comment contourner le pb (en dehors de mettre des <BR> lors de la génération du contenu de la cellule car je ne veux pas que les retours à la lignes soit présent dans le tableau initial. Je ne peux/veux pas non plus gérer 2 versions de chaque cellule une avec <BR> et une sans <BR> car j'ai le "pb" sur toutes les cellules d'un tableau qui peut être grand

Merci pour toute aide...

**le_chomeur** · 25/03/2008, 15h14

aurais tu un exemple un peu plus complet ?

**jld33** · 25/03/2008, 16h10

Est ce que ceci permet de mieux cerner ?
Désolé j'ai simplifié mon code qui utilise prototype mais quelques modifs pourraien t permettre de s'en passer. (je n'ai pas fait les modifs en question de peur d'introduire des bugs mais a priori, prototype n'est pas en cause).

Avec le code suivant, j'ai un résultat Ok sous Mozilla (le div affiche la cellule avec les retours a la ligne) et Ko sous IE6 (tout en ligne sans retours):

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
 
<style type="text/css">
thead, tfoot {
  text-align: center;
}
 
#table1{
  table-layout: fixed; /* la tableau prend la taille définie et ignore le contenu*/
  width: 100px; /* le table layout ne marche pas sous Mozilla si on ne met pas de taille (mÃªme 1px suffit)
      on peut mettre en pourcentage aussi*/
}
 
 td {
  white-space: nowrap;
  overflow: hidden; /* pour les navigateurs autres que IE (cache le texte qui dÃ©passe) */
  text-overflow: ellipsis; /* ne marche que sous IE (tronque le texte en ajoutant '...') */
}
 
.sortable tr {
  overflow: hidden;
  white-space:nowrap;
 
}
 
thead tr td {
  white-space: normal;
}
 
 
#IdCommentaire{
  background-color:#FFFFE7; 
  border: 1px solid #DEDEDE; 
  color: black;
  position:absolute; 
  visibility:hidden;
  white-space:pre;/*nowrap;*/ /* indique de prendre le formatage tel quel avec retours Ã  la ligne tabulations etc)*/
}
 
 
</style>
 
<script type="text/javascript" src="js/framework/prototype.js"></script>
 
 
<script type="text/javascript">
//<![CDATA[
 
    function show_comment(event) {
      var elt_div = $('IdCommentaire');
      // on récupère ce qui est à l'origine du show comment
      var elt_td = Event.element(event)
      if (elt_div) {
        //elt_div.innerHTML='<pre>'+elt_td.innerHTML+'</pre>';
        elt_div.innerHTML=elt_td.innerHTML;
        //elt_div.innerHTML=elt_td.innerText.replace('\n','|');
        //cloneNode = elt_td.cloneNode(true);
        //elt_div.innerHTML="";
        //elt_div.appendChild(cloneNode);
        //elt_div.innerHTML=elt_td.firstChild.nodeValue.replace('\n','|');
        elt_div.style.visibility="visible";
      }     
    } 
    function hide_comment() {
      var elt_div = $('IdCommentaire')
      if (elt_div) {
        elt_div.style.visibility="hidden";
      }     
    }
 
  function initEvents() {
 
    if ($('detailBody')){
      Event.observe($('detailBody'), 'mouseover', show_comment.bindAsEventListener());
      Event.observe($('detailBody'), 'mouseout', hide_comment);
    }
 
  }
 
  Event.observe(window, 'load', initEvents, false);
  //]]>
 
</script> 
 
</head>
<body>
 
 
  <div id="IdCommentaire"></div>
 
  <div id="inProgress" style="visibility: hidden;"><h4 style="color:#FEA620; margin:0px">Sort in progress, please wait...</h4></div>
 
  <table id="table1" border="1"  style="cellspacing: 0;cellpadding: 2;" >
    <thead >
    <tr >
      <td valign="top"  style=" width: 60px;">Exemple</td>
    </tr>
    </thead>
    <tbody id="detailBody">
    <tr >
       <td>&nbsp;test1
Test 2 apres retour a la ligne
       </td>
    </tr >
    <tr >
       <td>dcvvko fbgfrb
         bnnthn
         thn 
         hyn hy
         hy
         ,hjy
          jy,jyu, jk,h
           ,hjy,jy
 
       </td>
    </tr >
    <tr >
       <td>un 
  deux
  trois
       </td>
    </tr>
  </tbody>
 
  </table>
    </body>
  </html>

**le_chomeur** · 25/03/2008, 16h47

étrange ... je viens de faire un test avec ceci :

Code :

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

1
2
3
4
 
test
test
test...

sans les balises : pre , celle ci s'affiche bien en ligne,
avec , les retours a la ligne sont bien pris en comptes.

testé sous ie7 et firefox

**jld33** · 25/03/2008, 17h12

Heu, désolé je n'ai pas tout suivi

Envoyé par le_chomeur

sans les balises : pre , celle ci s'affiche bien en ligne,
avec , les retours a la ligne sont bien pris en comptes.

testé sous ie7 et firefox

Le test correspond à la partie qui était commentée :

Code :

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

elt_div.innerHTML='<pre>'+elt_td.innerHTML+'</pre>';

que tu as décommentée ou a autre chose ?

De plus, il y a de fortes chances que le comportement soit différent entre IE6 et IE 7

**le_chomeur** · 25/03/2008, 17h37

mes excuse effectivement les saut de ligne sautent , exemple simple :

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
<table>
<tr><td style="border:1px solid black">
<pre id="titi">
test
test
test
test
test
test
test
test
test
<pre>
</td></tr>
</table>
 
<div id="toto">
test
</div>
 
<div>
<pre id="toto2">
</pre>
</div>
 
<script type="text/javascript">
 
(document.getElementById('toto').innerHTML  = "Sans Pre : "+document.getElementById('titi').innerHTML);
(document.getElementById('toto2').innerHTML  = "Avec Pre : "+document.getElementById('titi').innerHTML);
 
 
</script>

je continu de chercher

[DOM] IE supprime les "\n " avec innerHTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager