Discussion :

[Zebulon777]

Bonjour tout le monde,

Je me lance dans un grand projet et j'espère que vous pourrez m'aider.
Je vais essayer de l'expliquer simplement.
(En fait, pour ceux qui connaissent, on me demande de créer un moteur d'inférence en Javascript.)

Dans un fichier XML, je vais récupérer la structure d'une page qui me permet donc de récupérer le nombre de zones de saisie, leur type et leur emplacement dans un tableau, la valeur d'initialisation, le nombre de caractère, etc...

Le tableau est préalablement créé dans la page HTML et chaque cellule est nommée L1C1, L1C2... L3C1, L3C2, etc...

Lorsque les informations sont récupérer dans le fichier XML, il faut ensuite que je créé dynamiquement toutes les zones de saisies dans les bonnes cellules du tableau de la page HTML.

J'arrive bien à récupérer les informations du fichier XML, mais je n'arrive pas à créé dynamiquement les zones de saisie.

Je suis donc preneur de toutes aide et de tous conseils qui me permettraient de me dépatouiller.

Merci d'avance pour toute l'aide que vous m'apporterez...

[NoSmoking]

Bonjour,

il faut ensuite que je créé dynamiquement toutes les zones de saisies...

il existe pour cela la méthode createElement de l'objet document

Code :

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

var oInput = document.createElement('INPUT');

...dans les bonnes cellules du tableau de la page HTML.

il existe pour cela la méthode appendChild qui permet l'ajout d'un élément à un autre élément du DOM.

Concernant la récupération des cellules d'une TABLE il suffit de pointer sur la bonne ligne puis colonne et pour cela tu peux utiliser les collections rows et cells d'une TABLE.

Avec le HTML suivant

Code html :

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

1
2
3
4
5
6
<table>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
  </tr>
</table>

le script suivant

Code :

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

1
2
3
var oTable = document.getElementsByTagName('TABLE')[0];
var oCell = oTable.rows[0].cells[1];  // ligne 1, cellule 2
alert(oCell.innerHTML);

affichera "Colonne 2".

[Zebulon777]

Merci, dés que je peux tester ça, je fais un retour.

(Ps : j'ai supprimé mon petit HS, j'ai trouvé la réponse)

[Zebulon777]

Bon, ca avance, mais ce n'est pas encore une grande réussite

Lorsque j'ai créé l'élément, je n'arrive pas à le placer dans la bonne cellule du tableau ?
D'ailleurs, je ne vois pas l'élément créé sur la feuille...
C'est normal, docteur ?

Code :

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

1
2
3
4
 
var oInput = document.createElement('INPUT');
var ObjTab = document.getElementById("Tab");
ObjTab.rows[0].cells[1] = oInput;

[NoSmoking]

tu as oublié l'essentiel

il existe pour cela la méthode appendChild qui permet l'ajout d'un élément à un autre élément du DOM.

donc

Code :

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

1
2
3
4
5
var oInput = document.createElement('INPUT');
var ObjTab = document.getElementById("Tab");
// ObjTab.rows[0].cells[1] = oInput; -- NE VEUX RIEN DIRE --
// utilisation de la méthode appendChild
ObjTab.rows[0].cells[1].appendChild( oInput);

[Bovino]

je n'arrive pas à le placer dans la bonne cellule du tableau ?

Attention, dans la notation

Code :

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

ObjTab.rows[0].cells[1]

la propriété cells correspond à une collection d'objets td ou th, en aucun cas à un input.

[Zebulon777]

Super, merci beaucoup.

Maintenant, comment faire pour configurer les champs créés dynamiquement ? (Libellé devant, Type, nb car, format, etc...) ?

[devyan]

Bonjour,

Avec ta variable oInput tu peux configurer tout ce qui correspond au input "pur" (les attributs HTML).

En ce qui concerne un "Libellé devant" il faut le créer comme tu fais pour le input (mais ce sera un tag label)

[Zebulon777]

Dites, petite question subsidiaire : comment récupérer le nom d'un noeud d'un fichier XML ?

Un truc du style : ObjetXML.selectNodes(WNoeud0).item(WIndex).name; ?