Insérer des balises HTML avec du javascript

Umbriel08 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention   -  
Umbriel08 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention   -
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

Umbriel08 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention   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