Insérer des balises HTML avec du javascript

[Fermé]
Signaler
Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
-
Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
-
Bonjour,

J'aimerais savoir s'il est possible d'insérer des balises HTML avec du javascript, si oui, comment ?

Exemple : Je clique sur un bouton, ça insère une nouvelle ligne à mon tableau.

A voir également:

14 réponses

Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
40
En fait,

Je développe une petite application pour mon stage.
Dans cette appli, j'ai un tableau ou des clients insère des produits avec des champs d'un formulaire.

Je commence mon formulaire avec 10 entrées et si le client en souhaite plus, il appuie sur un bouton que j'ai créer en bas de la page "Ajouter une ligne".

J'ai plusieurs problème à ce niveau car je n'ai quasiment jamais fait de javascript.

J'ai donc essayer ceci. (Ce qui apparement ne marche pas)

(Désolé du gros pavé)

<?php 
session_start(); 
// Page pour demander une fourniture 
?> 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <title></title> 
 <link rel="stylesheet" type="text/css" href="stylesheet_appli.css" /> 
<script type="text/javascript"> 
  
var c,c2,ch,num,start; 
start = 11; 
  
// ajouter un champ avec son "name" propre; 
function plus(){ 
c=document.getElementById('div'); 
c2=c.getElementsByTagName('input'); 
num=c2.length + start; 

document.getElementById('div').innerHTML = '<td>'; 

ch=document.createElement('input'); 
ch.setAttribute('type','text'); 
ch.setAttribute('name','ref'+num); 
c.appendChild(ch); 

document.getElementById('div').innerHTML = '</td><td>'; 

ch=document.createElement('input'); 
ch.setAttribute('type','text'); 
ch.setAttribute('name','desc'+num); 
c.appendChild(ch); 

document.getElementById('div').innerHTML = '</td><td>'; 

ch=document.createElement('input'); 
ch.setAttribute('type','text'); 
ch.setAttribute('name','qte'+num); 
c.appendChild(ch); 

document.getElementById('div').innerHTML = '</td><td>'; 

ch=document.createElement('input'); 
ch.setAttribute('type','radio'); 
ch.setAttribute('name','type'+num); 
c.appendChild(ch); 

ch=document.createElement('input'); 
ch.setAttribute('type','radio'); 
ch.setAttribute('name','type'+num); 
c.appendChild(ch); 

document.getElementById('div').innerHTML = '</td><td>'; 

ch=document.createElement('input'); 
ch.setAttribute('type','text'); 
ch.setAttribute('name','obs'+num); 
c.appendChild(ch); 

document.getElementById('div').innerHTML = '</td>'; 

// document.getElementById('sup').style.display='inline'; 
}  
</script> 
</head> 
<body id='body' > 
<form id='form' method='post' action='demandeFournitureEffectuee.php'> 
<div id='div'> 
</div> 
<table id='demande'> 
<tr> 
 <td></td> 
 <th>Référence</th> 
 <th>Description*</th> 
 <th>Quantité*</th> 
 <th>Type*</th> 
 <th>Observations éventuelles</th> 
</tr> 
<?php 
// Possibilité d'ajouté 10 enregistrements en une seul fois 
for ($i=1;$i<=10;$i++){ 
 echo '<tr> 
 <td>'.$i.'</td> 
 <td><input type=\'text\' name=\'ref'.$i.'\' /></td> 
 <td><input type=\'text\' name=\'desc'.$i.'\' /></td> 
 <td><input type=\'text\' name=\'qte'.$i.'\'/></td> 
 <td><input type=\'radio\' name=\'type'.$i.'\' value=\'bureau\' id=\'bureau\' checked=\'checked\'/><label for=\'bureau\'>Bureau</label> 
 <input type=\'radio\' name=\'type'.$i.'\' value=\'informatique\' id=\'informatique\'/><label for=\'informatique\'>Info.</label></td> 
 <td><input type=\'text\' name=\'obs'.$i.'\' class=\'observation\'/></td> 
</tr>'; 
} 
?> 
</table> 
<p class='petit'>* Champ obligatoire</p> 
<br /> 
<div class='center'> 
<input type="button" value="Ajouter une ligne" onclick="plus()" /> 
<input type='submit' value='Valider' class='submit' /> 
</form> 
<form action='index.php' class='right'> 
 <input type='submit' value='Retour' class='submit' /> 
</form> 
</div> 
</body> 
</html>
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42584 internautes nous ont dit merci ce mois-ci

Messages postés
115
Date d'inscription
lundi 3 mai 2010
Statut
Membre
Dernière intervention
8 mai 2012
16
Tu devrais remplacer :

document.getElementById('div').innerHTML = '</td>';

par

document.getElementById('demande').innerHTML += '</td>';
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42584 internautes nous ont dit merci ce mois-ci

Messages postés
115
Date d'inscription
lundi 3 mai 2010
Statut
Membre
Dernière intervention
8 mai 2012
16
bonjour ,

Pour écrire dans une balise html via ton code javascript ;

il faut faire utiliser :

document.getElementById("IdDeTonElement").innerHTML = "tontexte"
Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
40
Tu as mal compris ma question.

Je ne veux pas insérer du texte dans une balise html, je veux insérer des balises html via du javascript. :)
Messages postés
115
Date d'inscription
lundi 3 mai 2010
Statut
Membre
Dernière intervention
8 mai 2012
16
Il y a un moment que je n'ai pas fait de javascript , mais il me semble que tu peux ajouter des ligne à ton tableau avec sa :

document.getElementById("IdDeTonTableau").innerHTML = "<td>xxx</td>"

Et si tu veux ajouter un tableau complet (dans un div je suppose ) :

document.getElementById("IdDeTonDIV").innerHTML = "<table><tr><td>xxx</td></td></table>"
Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
40
Ca m'insère un champ (sur les 6 voulus), et au dessus de tableau, pas dedans.

J'ai omis les balises <tr> en début et fin de script.
Je les ai rajouté mais ça ne fonctionne pas non plus.

Faudrait que j'apprenne le javascript, j'ai déjà le java à apprendre ça va me prendre du temps..
Messages postés
115
Date d'inscription
lundi 3 mai 2010
Statut
Membre
Dernière intervention
8 mai 2012
16
Base toi la dessus :

function plus()

{

document.getElementById('demande').innerHTML += '<tr><td>test</td><td>test</td><td>test</td></tr>'

}

cela va te permettre d'ajouter des éléments dans ton tableau à la suite de ceux existants.
Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
40
Non, ton boût de code ne fonctionne pas :>, Dans l'entreprise ou je fait mon stage, il sont sous IE6, peut-être que le problème vient de là :o).
Ou peut-être pas, mais ta fonction ne rajoute pas de ligne à mon tableau.
Messages postés
115
Date d'inscription
lundi 3 mai 2010
Statut
Membre
Dernière intervention
8 mai 2012
16
OK , je ne vois pas alors , car j'ai testé chez moi et cela fonctionne.
Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
40
J'ai essayé ta fonction dans une page contenant un tableau simple, et ça ne fonctionne même pas :

<script> 
function plus()  

{  

document.getElementById('demande').innerHTML += '<tr><td>test</td><td>test</td><td>test</td></tr>'  

}  
</script> 
<table id='demande'> 
<tr> 
 <td>test</td> 
 <td>test</td> 
 <td>test</td> 
</tr> 
</table> 
<input type='button' value='Ajouter une ligne' onClick='plus()' />
Messages postés
115
Date d'inscription
lundi 3 mai 2010
Statut
Membre
Dernière intervention
8 mai 2012
16
Oui en effet j'ai testé sa sous IE6 et cela ne fonctionne pas .(IEtester)
Dommage que certaines entreprises travaillent encore sous IE6....
Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
40
Ca craint vraiment ... En gros l'option qu'il me demande est tout simplement impossible à réaliser ... (Ca me déprime encore plus je me décarcasse pour que ça fonctionne depuis maintenant 3 jours).
Messages postés
115
Date d'inscription
lundi 3 mai 2010
Statut
Membre
Dernière intervention
8 mai 2012
16
Je sais pas , il y a peut etre une modif à faire pour IE6 mais je ne vois pas...

Sur ce coup je peux plus t'aider , bon courage.

@+
Messages postés
65
Date d'inscription
mardi 8 juin 2010
Statut
Membre
Dernière intervention
30 septembre 2010
40
Je vais tout simplement les prévenirs que je suis incapable de réaliser ce qu'il me demande, vu qu'il ne sont pas prêt de mettre à niveau leur navigateur et qu'il faudrait valider toutes leurs applications au niveau national ça fait beaucoup je les comprends.

J'abandonne cette option.