voila en bidouillant un code trouvé sur le net j'ai creer un tableau dynamique
(possibilité d'ajouter des lignes)
Probleme lorsque j'entre un valeur celle-çi s'ajoute dans tous les champs.
et je vois pas comment faire
ps: je débute en javascript
Code : Tout sélectionner
<html>
<head>
<script type="text/javascript">
<!-- Begin
var arrInput = new Array(0);
var arrInputValue = new Array(0);
function addInput() {
//arrInput.push(createInput(arrInput.length));
arrInput.push(arrInput.length);
//arrInputValue.push(arrInputValue.length);
arrInputValue.push("");
display();
}
function display() {
document.getElementById('parah').innerHTML="";
for (intI=0;intI<arrInput.length;intI++) {
document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
}
}
function saveValue(intId,strValue) {
arrInputValue[intId]=strValue;
}
function createInput(id,value) {
var sLine = '<tr>';
sLine += '<td><input type=\"hidden\" name=\"id['+id+']\" value=\"'+id+'" />'+(id + 1)+'</td>';
sLine += '<td><input type=\"text\" name=\"name['+ id +']\" onChange=\"javascript:saveValue('+ id +',this.value)\" value=\"'+ value + '\"></td>';
sLine += '<td><input type=\"text\" name=\"vlan['+ id +']\" onChange=\"javascript:saveValue('+ id +',this.value+)\" value=\"'+ value + '\"></td>';
sLine += '<td><input type=\"text\" name=\"ip['+ id +']\" onChange=\"javascript:saveValue('+ id +',this.value)\" value=\"'+ value + '\"></td>';
sLine += '<td><input type=\"text\" name=\"mask['+ id +']\" onChange=\"javascript:saveValue('+ id +',this.value)\" value=\"'+ value + '\"></td>';
sLine += '<td><input type=\"text\" name=\"plug['+ id +']\" onChange=\"javascript:saveValue('+ id +',this.value)\" value=\"'+ value + '\"></td>';
sLine += '<td><input type=\"text\" name=\"mac['+ id +']\" onChange=\"javascript:saveValue('+ id +',this.value)\" value=\"'+ value + '\"></td>';
sLine += '</tr>';
return sLine;
}
function deleteInput() {
if (arrInput.length > 0) {
arrInput.pop();
arrInputValue.pop();
}
display();
}
// End -->
</script>
<SCRIPT language="JavaScript" title="" type="text/javascript">
</SCRIPT>
<h1>Gestion des Interfaces</h1>
<form action="" method="post">
<table class="formulaire" style="width: 100%; border: 1px solid black; background-color: orange;">
<thead style="background-color: blue; color: white;"><tr>
<th style="border: 1px solid black; width: 4%;">No</th>
<th style="border: 1px solid black; width: 16%;">Nom interface réseau</th>
<th style="border: 1px solid black; width: 16%;">Vlan</th>
<th style="border: 1px solid black; width: 16%;">Adresse ip</th>
<th style="border: 1px solid black; width: 16%;">Masque</th>
<th style="border: 1px solid black; width: 16%;">Nom prise</th>
<th style="border: 1px solid black; width: 16%;">Adresse mac</th>
</tr></thead>
<tbody id="parah" style="border: 1px solid black;">
</tbody>
<tfoot>
<tr>
<td colspan="7" style="border: 1px ridge black; background-color: #ccae53;">
<a href="javascript:addInput()">Ajouter une interface</a> | <a href="javascript:deleteInput()">Retirer la derniere interface</a>
</td>
</tr>
</tfoot>
</table>
<div style="margin: 1px; padding: 1px;"><input type="submit" name="submit" value="Ok" /></div>
</form>
</body>
</html>
