Discussion :

[stloje]

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]

il faut "appender" dans le tbody

Code :

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

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

[Bovino]

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

[stloje]

Ok! Merci, ça marche!