Salut, j'ai tableau avec plusieurs champs. l'utilisateur à la possibilité d'ajouter une ligne ou d'en supprimer. j'ai un code javascript qui permet de le faire.
Le problème c'est que je voudrais récupérer toutes les valeurs saisies dans ce tableaux et les insérer dan une base de données quelque soit le nombre de ligne que l'utilisateur aura remplies. et là je suis bloqué. j'aimerais de l'assistance pour le faire. merci
html:
Code :
<html><table>
<thead>
<tr>
<th>champ1</th>
<th>champ2</th>
<th>champ3</th>
<th>champ4</th>
<th>champ5</th>
<th>Champ6</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5"><a href="#" onclick="addLigne(this); return false;">Ajouter
une ligne</a></th>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="text" name="champ1[]" /></td>
<td><input type="text" name="champ2[]" /></td>
<td><input type="text" name="champ3[]" /></td>
<td><input type="text" name="champ4[]" /></td>
<td><input type="text" name="champ5[]" /></td>
<td><input type="text" name="champ6[]" /></td>
<td><a href="#" onclick="delLigne(this); return false;">Supprimer</a></td>
</tr>
</tbody>
</table>
</body>
</html>
js:
Code :
* Utilisation :
* 1. Créer un tableau avec la proprieté class="dTable" (Dynamic TABLE)
* 2. Le tableau doit être standard : il contenir un <thead>, un <tbody> et un <tfoot>
* et utiliser à bon escient les <td> et <th>.
* 3. La première ligne du tbody sera utilisée comme ligne de réference.
* Elle sera clonée pour en ajouter de nouvelle. Elle ne sera pas affichée.
*/
window.onload = dtableInit;
/* initialise le script */
function dtableInit() {
var table = document.getElementsByTagName('TABLE');
for ( var i = 0; i < table.length; i++ ) {
// on récupère tous les tableaux dynamiques
if ( table[i].className = 'dTable' ) {
var tbody = table[i].tBodies[0];
var newTr = tbody.rows[0].cloneNode(true);
// on masque la première ligne du tbody (la ligne de reference)
tbody.rows[0].style.display = 'none';
// on en ajoute une
tbody.appendChild(newTr);
}
}
}
/* trouve le tag "parentTagName" parent de "element" */
function getParent(element, parentTagName) {
if ( ! element )
return null;
else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() )
return element;
else
return getParent(element.parentNode, parentTagName);
}
/* ajoute une ligne */
function addLigne(link) {
// 1. récuperer le node "TABLE" à manipuler
var td = link.parentNode;
var table = getParent(td,'TABLE');
// 2. on va manipuler le TBODY
var tbody = table.tBodies[0];
// 3. on clone la ligne de reference
var newTr = tbody.rows[0].cloneNode(true);
tbody.appendChild(newTr);
if ( document.all ) // pour IE
newTr.style.display = "block";
else
newTr.style.display = "table-row"; // pour Gecko
}
/* supprimer une ligne */
function delLigne(link) {
// 1. récuperer le node "TABLE" à manipuler
var td = link.parentNode;
var table = getParent(td, 'TABLE');
// 2. récuperer le TBODY
var tbody = table.tBodies[0];
// 3. Supprimer le TR
tbody.removeChild(getParent(td, 'TR'));
}
02/02/2010, 13h57
recuperer les valeurs d'un champ dans un tableau dynamique
recuperer les valeurs d'un champ dans un tableau dynamique
