Discussion :

[gentil]

Bonjour tout le monde,

Lorsque je développe j'utilise le javascript avec les evénements onclick,onblur etc et j'utilise aussi les arboresences javascript a savoir document.getElementById("nomdelidentifiant").value par exemple pour vérifier si l'utilisateur a saisi une valeur dans le champ de saisie.

1)
Récement je m'interresse à DOM et ma premiere question est:
lorsque l'on utilise document.getElementById("nomdelidentifiant").value, est ce que c'est du DOM.


2)

J'ai utilisé avec DOM le createElement mais visiblement ca fonctionne pa, il comprend pas les "table","tr","td". Le code m'affiche bonjour mais ne prend pas en compte la bordure.

voici le code

Code :

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

1
2
3
4
5
6
7
  document.createElement("<table border='10'>");
  document.createElement("<tr>");
  document.createElement("<td>");
  document.write("bonjour");
  document.createElement("</td>");
  document.createElement("</tr>");
  document.createElement("</table>");

Merci de votre aide

[Bisûnûrs]

C'est normal que ton texte s'affiche mais pas le tableau.
Tu créés les éléments mais tu ne les affectes pas dans la page.

Et puis tu ne peux pas construire ton tableau de cette manière.

Enfin, tu devrais bannir l'utilisation de document.write de ton vocabulaire.

Pour avoir ce que tu souhaites c'est :

Code :

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

1
2
3
4
5
6
7
8
9
10
var table = document.createElement("<table>");
var tr    = document.createElement("<tr>");
var td    = document.createElement("<td>");
 
table.style.border = '10px solid #000';
 
document.getElementById('idconteneur').appendChild(table);
table.appendChild(tr);
tr.appendChild(td);
td.appendChild(td.createTexteNode("Bonjour"));

[gentil]

Je te remercie de ton aide, mais je viens de copier ton code mais visiblement il y a un petit soucis car rien ne s'affiche à l'écran.

Sinon lorsque l'on utilise DOM est ce que c'est du dynamique HTML.

Merci de votre aide

[Bisûnûrs]

Ouaip, c'était document.createTextNode et pas td.createTextNode :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function test(){
   var table = document.createElement("<table>");
   var tr    = document.createElement("<tr>");
   var td    = document.createElement("<td>");
 
   table.style.border = '10px solid #000';
 
   document.getElementById('idconteneur').appendChild(table);
   table.appendChild(tr);
   tr.appendChild(td);
   td.appendChild(document.createTextNode("Bonjour"));
}

Code html :

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

1
2
<a href="javascript:test();">Ajout</a>
<div id="idconteneur"></div>

[gentil]

Je te remercie de ton aide mais ca fonctionne toujours pas.

Sinon je voulais savoir.
Cette ligne sert à quoi
document.getElementById('idconteneur').appendChild(table);

Merci de ton aide.

[deY!]

elle permet d'insérer l'element creer, parcequ'il ne suffit pas simplement de le créer avec createElement, mais il faut aussi l'inserer par la suite.

Plus précisement, il rajoute un element dans un autre sans effacer ce qu'il y avait deja dedans...

Js

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
 
<script type="text/javascript">
function test() {
   var table = document.createElement("table");
   table.setAttribute("style", "border:10px solid #000;");
   var tr = document.createElement("tr");
   var td = document.createElement("td");
   var txt = document.createTextNode("bonjour");
 
   td.appendChild(txt);
   tr.appendChild(td);
   table.appendChild(tr);
   document.getElementById('idconteneur').appendChild(table);
}
</script>
 
<a href="javascript:test();">Ajout</a>
<div id="idconteneur"></div>

[GEFIRO1]

salut,

cherche du coté de
table.insertRow(-1)
et
table.insertCell(<monRang>)

ca marche plutot bien.