Ajout de ligne à la volée dans un tableau
Bonjour,
Je travaille actuellement sur un système de gestion pour des listes de livres - scolaires - en php.
Lors de la modification d'une liste, je génère un formulaire (nommé "liste_livre") sous forme de tableau, comportant autant de lignes que de livres dans la liste, et autant de colonnes que de champs dont j'ai besoin pour chacun des livres.
Mon problème est le suivant : le nombre de livres dans une liste peut varier.
Si c'est en diminuant, pas de problème, l'utilisateur peut déjà indiquer quel(s) livre(s) il souhaiterait voir supprimé(s) de la liste. En revanche, pour ajouter des livres à la liste, j'ai besoin de pouvoir ajouter des lignes à mon tableau.
J'ai donc penser utiliser du javascript pour insérer "à la volée" de nouvelles lignes vides dans mon tableau grace à la propriété "innerHTML", appliquée sur une balise <tr id"new_livre"></tr> originellement vide. Le contenu de cette ligne du tableau est modifié si besoin est par un appel à la fonction add_livres() (voir ci dessous) à travers un second formulaire (nommé "add_livres"), comportant un champ <input type="text" name="nb_livres" / > dans lequel doit être saisie le nombre de ligne à ajouter (par défaut 1).
Au point où j'en suis, sous IE ca ne marche pas du tout, et sous Firefox, ca ne fonctionne qu'à moitié : les lignes insérées sont toutes décalées par rapport au tableau d'origine, sauf une.
Est-ce que quelqu'un peut m'aider à trouver où se situe mon erreur ? Je pense qu'elle vient de la fonction, puisque le reste semble fonctionner convenablement.
J'ajoute que ce système étant destiné à un usage - très - privé, la portabilité sur plusieurs navigateurs n'est pas du tout mon soucis premier. Faire en sorte que ca marche convenablement sur l'un d'entre eux au moins sera déjà très bien ;)
Voici le code de ma fonction javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function add_livres()
{
var nb_livres=document.liste_livre.nb_livres.value;
var new_livres=document.add_livre.nb_livres.value;
var new_ligne=document.getElementById('new_livres').innerHTML;
for(i=1; i <= new_livres; i++)
{
nb_livres++;
new_ligne+='<td><input type="text" name="code_barre_'+nb_livres+'" / ></td><td><input type="text" name="isbn_'+nb_livres+'" / ></td><td><input type="text" name="matiere_'+nb_livres+'" / ></td><td><input type="text" name="titre_'+nb_livres+'" / ></td><td><input type="text" name="editeur_'+nb_livres+'" / ></td><td><input type="text" name="prix_'+nb_livres+'" / ></td><td align="center"><input type="checkbox" name="neuf_'+nb_livres+'" value="1" / ></td><td><input type="checkbox" name="ok_'+nb_livres+'" value="1" checked="checked" / ></td>';
if(i!=new_livres)
{
new_ligne+='</tr><tr>';
}
}
document.getElementById('new_livres').innerHTML=new_ligne;
document.liste_livre.nb_livres.value=nb_livres;
document.add_livre.nb_livres.value=1;
} |
[ Note ]
Pour faciliter le traitement à l'enregistrement de la liste de livre, le formulaire "liste_livre" comporte un champ masqué "nb_livres", indiquant le total de livre dans la liste.
Autre point, les champs du formulaire "liste_livre" sont nommés de la facon suivante : "nom_du_champ_n°dulivre".
Merci d'avance.
