création TR avec createElement sous IE [Résolu]

stloje · 02/02/2012, 11h45

Bonjour à tous,

J'ai un problème d'affichage sous IE lorsque je crée dynamiquement une ligne de tableau (TR) à l'aide de Javascript. La ligne se crée correctement (visible à partir de l'outil de développement sous IE8), mais reste invisible. De plus, lorsque je l'exécute sous FF, je perds les styles appliqués au tableau. J'imagine que ces erreurs sont liés.

Voici le code :

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
 
<script language="javascript">
    function $$F (fieldName) {
      var obj;  
      if (document.getElementById (fieldName) != undefined) {obj = document.getElementById (fieldName);}
      else if (document.getElementsByName (fieldName) != undefined) {obj = document.getElementsByName (fieldName) [0];}
      return obj;
    }
  </script>
 
  <script language="javascript" src="./test/jquery/jquery-1.6.1.min.js"></script>
  <style type="text/css">
 
    #showChildrens {
      border: none;
      width: 100%;
      border-collapse: collapse;
      /*border-spacing: 0;*/
    }
    #showChildrens th {border-bottom: 1px solid black;}
    #showChildrens td, #showChildrens th {
      border-right: 1px solid black;
    }
    #showChildrens td:last-child, #showChildrens th:last-child {border-right: none;}
  </style>
  <script language="javascript">
    var lastRow = 0;
    $(document).ready(function() {
      var childTable = ["NomEnfant", "PrenomEnfant", "DateNaissanceEnfant", "SexeEnfant", "ChargeFiscaleEnfant"];
      var valueTable = [];
      for (k = 0; k < childTable.length; k++) {valueTable.push ($$F (childTable [k]).value.split ("; "));}
 
      //il faut alimenter le tableau enfant (onglet "Fiche entré")
      if (childTable [0].length > 0) {
        //on se positionne sur le tableau
        var table = $$F ("showChildrens");
        //on crée autant de ligne qu'il y a d'enfants inscrits
        for (i = 0; i < valueTable [0].length; i++) {
          // crée une ligne de tableau
          var row = document.createElement ("tr");
          var id = document.createAttribute ("id");
          id.value = i.toString ();
          row.setAttributeNode (id);
 
          // création des cellules
          for(var j = 0; j < 5; j++) {
            // Crée un élément <td> et un nœud texte, place le nœud texte
            // comme contenu texte de l'élément <td> et le place à la fin
            // de la ligne du tableau
            cell = document.createElement ("td");
            //on ajoute le contenu du champ
            texte = document.createTextNode(valueTable [j] [i]);
            cell.appendChild (texte);
            row.appendChild (cell);
          }
          //on ajoute deux colonnes avec les icônes
          cell = document.createElement ("td");
          //on ajoute le bouton de modification
          cell.innerHTML = '<a href="#" onClick="modifyChildTable (\'' + i.toString () + '\');"><img src="./edit_user.gif">'
          row.appendChild (cell);
 
          //on ajoute le bouton de suppression
          cell = document.createElement ("td");
          cell.innerHTML = '<a href="#" onClick="removeChildTable (\'' + i.toString () + '\');"><img src="./delete_user.gif">'
          row.appendChild (cell);
          // ajoute la ligne à la fin du corps du tableau
          table.appendChild(row);
        }
        lastRow += i;
      }
    })
 
    function removeChildTable (numLine) {
      if (confirm ("Vous vous apprêtez à supprimer cette entrée. Désirez-vous poursuivre?")) {
        var row = document.getElementById (numLine);
        var table = row.parentNode;
        table.deleteRow (row.rowIndex);
      }
    }
 
    function modifyChildTable (numLine) {
      alert ("modifie ligne " + numLine);
    }
  </script>
 
  <body>
 
<span class="abtn"><img src="./add_user.gif">&nbsp; <a href="#" onClick="">Ajouter un enfant</a> </span>&nbsp;
<div class="titre_bloc">ENFANT(S)</div>
<fieldset class="fdsetContenu">  
  <table id="showChildrens" style="border: 1px solid black;">
    <colgroup>
      <col span="2" style="width: 35%"/>
      <!--col-->
      <col style="width: 10%"/>
      <col span="4" style="width: 5%"/>
      <!--col-->
    </colgroup>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Pr&eacutenom</th>
        <th>Date<br />naissance</th>
        <th>sexe</th>
        <th>Charge<br />fiscale</th>
        <th></th>
        <th></th>
      </tr>
    <thead>
  </table>
</fieldset>
<input type="hidden" name="NomEnfant" value="Hébert; Demers">
<input type="hidden" name="PrenomEnfant" value="Marc; Patrick">
<input type="hidden" name="DateNaissanceEnfant" value="01/01/2000; 01/02/2000">
<input type="hidden" name="SexeEnfant" value="M; M">
<input type="hidden" name="ChargeFiscaleEnfant" value="N; O">

Avant qu'on me pose la question : oui, j'utilise le «Framework» JQuery (imposé); non, je en veux pas l'utiliser pour créer dynamiquement mon tableau puisque ce code sera peut-être (dans un avenir) utilisé là où JQuery ne sera pas présent, mais peut-être qu'il y aura un autre «Framework» à la place (genre Prototype ou Dojo).

Merci d'avance pour votre aide!

SpaceFrog · 02/02/2012, 11h47

il faut "appender" dans le tbody

Code :

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

 table.getElementsByTagName('tbody')[0].appendChild(row);

Bovino · 02/02/2012, 12h00

Pour ajouter des éléments de tableau, insertRow() et insertCell() sont largement plus recommandés.

stloje · 02/02/2012, 12h02

Ok! Merci, ça marche!

02/02/2012, 11h47	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 076 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 076 Points : 45 211 Points : 45 211	il faut "appender" dans le tbody Code : Sélectionner tout - Visualiser dans une fenêtre à part table.getElementsByTagName('tbody')[0].appendChild(row); __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/02/2012, 12h00	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 786 Points : 35 786	Pour ajouter des éléments de tableau, insertRow() et insertCell() sont largement plus recommandés. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

02/02/2012, 12h02	#4
stloje Invité de passage Développeur informatique Inscription : juillet 2009 Messages : 3 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : juillet 2009 Messages : 3 Points : 1 Points : 1	Ok! Merci, ça marche!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email