affichage tableau DOM

Version imprimable

Bonjour à tous,

Je souhaite modifier le DOM d'une page afin d'obtenir un tableau. Ce tableau contient des patients avec un bouton voir qui affiche leurs informations dans une autre page.

Mon problème c'est que si je mets un formulaire en javascript, le tableau ne s'assemble pas correctement à l'affichage.

Voici la structure du tableau

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<table>
 <thead>
  <tr>
   <th>Nom</th>
   <th>Prénom</th>
   <th>Id</th>
   <th>Voir</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

et ce que j'y insère

Code:

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
var nouveauElmtForm = document.createElement("FORM");
nouveauElmtForm.setAttribute("target","fiche_patient");
nouveauElmtForm.setAttribute("value","submit");
nouveauElmtForm.setAttribute("action","../../Fenetre_principale/Fiche_patient/fiche_patient.php");
nouveauElmtForm.setAttribute("method","post");
 
var nouveauElmtTr = document.createElement("TR");
 
var nouveauElmtNom = document.createElement("TD");
nouveauElmtNom.innerHTML = liste[i].patient.nom;
 
var nouveauElmtPrenom = document.createElement("TD");
nouveauElmtPrenom.innerHTML = liste[i].patient.prenom;
 
var nouveauElmtInput = document.createElement("INPUT");
nouveauElmtInput.setAttribute("name","id");
nouveauElmtInput.setAttribute("value",liste[i].patient.id);
nouveauElmtInput.setAttribute("type","hidden");
 
var nouveauElmtId = document.createElement("TD");
nouveauElmtId.appendChild(nouveauElmtInput);
var tmp = nouveauElmtId.innerHTML;
nouveauElmtId.innerHTML = tmp + liste[i].patient.id;
 
var nouveauElmtVoir = document.createElement("TD");
var nouveauElmtInput = document.createElement("INPUT");
nouveauElmtInput.setAttribute("name","affich");
nouveauElmtInput.setAttribute("src","../../images/fleche.png");
nouveauElmtInput.setAttribute("value","submit");
nouveauElmtInput.setAttribute("type","image");
nouveauElmtVoir.appendChild(nouveauElmtInput);
 
nouveauElmtTr.appendChild(nouveauElmtSexe);
nouveauElmtTr.appendChild(nouveauElmtNom);
nouveauElmtTr.appendChild(nouveauElmtPrenom);
nouveauElmtTr.appendChild(nouveauElmtAge);
nouveauElmtTr.appendChild(nouveauElmtId);
nouveauElmtTr.appendChild(nouveauElmtVoir);
 
_completeListe.appendChild(nouveauElmtTr);
_completeListe.appendChild(nouveauElmtForm);

Le problème n'arrive pas si j'enlève le formulaire ( mais je n'ai plus de moyen de récupérer l'ID et d'afficher les informations ).

Avez une solution à me proposer ?

Merci pour vos réponses.

Mélanie

27/05/2010, 17h08
E.Bzz

Citation:

Envoyé par Melex

Avez une solution à me proposer ?

Oui, dans les Contributions ;)

A+
27/05/2010, 18h03
Melex

La seule différence que je vois est

au lieu de

Code:

monInput.setAttribute("type","text");

c'est

Code:

monInput.type = "text";

Cela changerait-il quelque chose ?

(Je n'ai plus mon programme avec moi, je testerais demain)

La différence peut sembler plus théorique que pratique au premier abord.

Tout d'abord, il faut garder en mémoire la différence entre un document HTML et son modèle DOM.
Au chargement de la page, tu obtiens un document HTML, à savoir un ensemble de balises contenant des attributs.
Ce document génère un modèle JavaScript constitué d'objets JavaScript de type HTMLElement.
Chaque objet HTMLElement possède un ensemble de propriétés correspondant aux attributs valides de cet élément.
Chaque changement d'un attribut d'une balise génère un changement de la propriété JavaScript de l'objet HTMLElement associé et inversement, chaque modification d'une propriété JavaScript est répercutée dans le modèle HTML (à peu de chose près, voir les cas de l'attribut name par exemple qui est readonly pour IE :aie:).
Donc à première vue, les deux syntaxes sont équivalentes, sauf qu'il me semble plus élégant et plus conforme, lorsqu'on utilise JavaScript, de modifier des propriétés JavaScript que des attributs HTML, mais c'est juste un point de vue.
Là où ça se complique, c'est lorsque l'on veut ajouter des propriétés autres que celles définies par le modèle DOM (ce qui est autorisé en JavaScript, on peut à loisir ajouter des propriétés et des méthodes à un objet) ou lorsqu'on utilise des attributs HTML non conformes. Dans ces cas là, il n'existe plus de pont entre les deux...
Voir ce test pour s'en convaincre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <html> <head> <script type="text/javascript"> function checkAttr(){ alert(document.getElementById('monTest').toto); } function addAttr(){ document.getElementById('monTest').tata = "attribut ajouté"; alert(document.getElementById('monTest').getAttribute('tata')); } </script> </head> <body> <div id="monTest" toto="tata">Cette balise div possède un attribut "toto"</div> <input type="button" onclick='checkAttr()' value="Tester l'attribut toto" /> <input type="button" onclick='addAttr()' value="Ajouter un attribut" /> </body> </html>

28/05/2010, 09h38
E.Bzz

Citation:

Envoyé par Melex

Cela changerait-il quelque chose ?

Là c'est à toi de nous dire ;)

Par contre, si je te donnais ce lien, c'était plutôt pour gérer ce problème-ci :

Citation:

Envoyé par Bovino

(l'attribut name par exemple qui est readonly pour IE :aie:).

qui semble être à l'origine de tes soucis (je me base sur le fait que le problème disparait lorsqu'il n'y a plus de <form> ... or un name n'a d'impact que dans un <form>).

A+
28/05/2010, 09h45
Melex

C'est d'accord. Message passé.

Je vais modifier les propriétés Javascript plutôt que les attributs HTML.

Cela ne résout malheureusement pas mon problème :(.

Si je mets mon "TR" dans mon "FORM", toutes les infos (nom, prénom, id, etc) s'affichent "sous" la colonne nom.

Et c'est bien mon "FORM" qui pose problème car si je l'enlève, tout s'affiche correctement :calim2:.

En HTML le problème ne se pose pas, alors pourquoi en Javascript ? Et y a-t-il un moyen de le résoudre ?

(Je suis actuellement sous Chrome, et mon application n'est pas un site internet, je peux donc imposer le navigateur aux utilisateurs, et je ne leur imposerait pas IE ;))
23/06/2010, 20h20
SpaceFrog

name n'est apparemment plsu readonly pour IE8
sinon il y a ce qu'il faut pour y remedier dans les contributiuons:
http://www.developpez.net/forums/d53...ynamique-form/

attention également il faut appender dans les thead et le tbody
pour la construction de tableau avec DOM
http://www.developpez.net/forums/d47...us-rapidement/
24/06/2010, 16h06
Melex

D'accord. J'ai pris en compte tout ça.
J'append bien dans les thead et tbody.
Ce qui semble poser problème, c'est que je rajoute un form pour englober chacun de mes tr.
Et c'est quand je rajoute ce form que le tableau ne se forme pas correctement.
Est-ce que cela est dû au fait que le javascript ne gère pas les form dans les table?
24/06/2010, 16h12
E.Bzz
Citation:

Envoyé par Melex

Est-ce que cela est dû au fait que le javascript ne gère pas les form dans les table?

Disons plutôt que l'imbrication form/table peut être sujette à problème.

Pour une bonne compatibilité, mieux vaut que la table soit contenu dans le form.
Code:

1 2 3 4 5 <form ...> <table> ... </table> </form>
Sinon, le form peut être contenu entier dans un <td>.
Code:

1 2 3 4 5 6 ... <td> <form> ... </form> </td>
Les autres tentatives causent en général des erreurs (suivant les nav) ...

EDIT (oui, j'ai oublié l'essentiel :mrgreen:) : Or, dans ton cas, tu sembles l'ajouter entre le dernier <tr></tr> et le </table>
Code:

1 2 _completeListe.appendChild(nouveauElmtTr); _completeListe.appendChild(nouveauElmtForm);
A+
24/06/2010, 16h59
Melex

J'ai trouvé mon problème!
Je mettais mon form dans un tr et non dans un td.
Le problème venait surement de là.

Merci beaucoup en tout cas!
24/06/2010, 17h45
E.Bzz

Citation:

Envoyé par Melex

J'ai trouvé mon problème!
Je mettais mon form dans un tr et non dans un td.
Le problème venait surement de là.

C'est ce qu'il me semblait avoir expliqué ci-dessus :mrgreen:

A+