Bonjour,
Après des multiple essais infructueux, je m'adresse à vous chères âmes charitables !!
Mon objectif étant de :
pouvoir créer et supprimer dynamiquement des lignes de tableau contenant des inputs.
J'ai bien réussi à le faire, sauf qu'il y a un tout petit problème.
Quand j'insère une nouvelle ligne, les valeurs des input de la ligne au dessus se vide (ce que l'utilisateur a écrit.
Par exemple :
Je dois créer 2 produits, je créer une 1ère ligne, je met Produit A comme nom, je clique sur ajouter un autre produit, et la, Produit A disparaît laissant place à un champs vide.
Voici mes code
Code Javascript :
<script type="text/javascript"> //les fonction javascript pour ajouter / supprimer des produits ou des ?pes
var i = 0;
function fAddText() { //fonction qui cr?une ligne de produit en plus
var Contenu = document.getElementById('Cible').innerHTML; //on affecte la var contenu a tout ce qui est dans <div id="cible">
i=i+1;
if(i<20){
Contenu = Contenu +
'<div style=\"float:left; width:515px; margin-left:2px; margin-bottom:2px;\" id=\"suppr'+i+'\"><div><input style=\"margin-right:2px;:100px;\" type=\"text\" name=\"produit'+i+'\"/><input type=\"text\" name=\"quantite'+i+'\" style="width:40px;" /><select style=\"width:80px; margin-right:2px; margin-left:2px;\" name=\"mesure'+i+'\"><option value=0><?php echo CHOISIR;?></option><option value=1><?php echo GRAMME;?></option><option value=2><?php echo CL;?></option></select><select style=\"margin-right:2px; width:57px; \" name=equivalent_nbr'+i+' id=equivalent_nbr'+i+'><option value=1><?php echo RIEN;?></option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option></select><select style=\"margin-right:2px; width:80px; \" name=equivalent'+i+' id=equivalent'+i+'><?php $req=mysql_query("SELECT * FROM recipients");while($data=mysql_fetch_assoc($req)){echo '<option value="'.$data['id'].'">'.constant($data['Lib']).'</option>';}?></select><input type="button" value="<?php echo SUPPRIMER_PROD;?>" onclick="removeIt('+i+')" /></div></div>'; // chaque clic qui declanche cette fonction, contenu aura un input en plus
document.getElementById('Cible').innerHTML = Contenu;//on reaffecte le tout a la var Contenu
}
else
{
alert("<?php echo NBR_LIMITE_CLIC; ?>");
}
}
function removeIt(i){
ligne = document.getElementById('suppr'+i+'');
ligne.removeChild(ligne.firstChild );
}
</script>
Code HTML :
<table class="cible" style="width:79%; color:#666666">
<tr><td style="width:150px; border:none;"> <?php echo NOM;?></td> <td style="width:70px; border:none;"> <?php echo QUANTITE;?></td> <td style="width:40px; border:none;"> <?php echo MESURE;?></td> <td style="border:none;"> <?php echo EQUIVALENT;?></td><td style="border:none;"></td></tr>
</table>
Je vous remercie profondément !