Il y a deux choses à considérer :
- le traitement côté client (l'aspect interactif)
- le traitement côté serveur (l'aspect dynamique)
Une solution basique serait d'avoir ton tableau HTML, au-dessus duquel tu as un élément interactif « ajouter une ligne », qui va effectivement appeler la routine pour ajouter une ligne au tableau avec les éléments du formulaire.
Bref, quelque chose dans ce goût là :
<!DOCTYPE html>
<html>
<body>
<form action='' method='post'>
<span class='line-adder'>Ajouter une ligne</span>
<table>
<tr><td>Blah</td><td>Beuh</td></tr>
</table>
</form>
<script type='application/javascript'>
// <!--
document.getElementsByClassName('line-adder')[0]
.addEventListener('click', function(ev)
{
var table = this.parentNode.getElementsByTagName('table')[0];
var od = table.ownerDocument;
var line = table.appendChild(od.createElement('tr'));
var cell = line.appendChild(od.createElement('td'));
var input = cell.appendChild(od.createElement('input'));
input.setAttribute('name', 'first[]');
cell = line.appendChild(od.createElement('td'));
input = cell.appendChild(od.createElement('input'));
input.setAttribute('name', 'second[]');
});
// -->
</script>
</body>
</html>
Pour le côté serveur, je crois que c'est assez évident maintenant.
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Chargement en cours
