Insertion ligne tableau + contenu
Bonjour,
J'aimerai ajouter des lignes à un tableau. Mais plus compliqué que ça, un exemple du problème sera plus parlant :
Un formulaire pour ajouter un livre, avec les champs "title", "author" et "subject". Problème, on peut avoir plusieurs "author". Je voulais donc mettre un bouton "+" qui m'ajoute une ligne "d'author".
Le formulaire :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<table>
<tr>
<td>title : </td>
<td><input type="text" name="title_book" /></td>
<td></td>
</tr>
<tr>
<td>author : </td>
<td><input type="text" name="author_book_1" /></td>
<td><input type="button" id="add_author" name="add_author" value="+" /></td>
</tr>
<tr>
<td>subject : </td>
<td><input type="text" name="subject_book" /></td>
<td></td>
</tr>
</table> |
J'ai réussi à cloner la ligne "tr" contenant le bouton, et de l'insérer juste en dessous du bouton:
Code:
1 2 3 4 5
|
$("#add_author").click(function() {
$(this).parent().parent().clone().insertAfter($(this).parent().parent()); // on clone la ligne.
$(this).css("display", "none"); // pour ne garder qu'un bouton '+' affiché.
}); |
Problème 1 - Du coup, mes "input author", ils ont tous le même id et name.
Je cherche donc un moyen d'incrémenter l'id et le name.
Problème 2 - Pareil pour les boutons, même id, donc il ne marche plus.
J'aimerai déplacer le bouton dans la ligne d'en-dessous.
Je voulais essayer des trucs dans le genre : Récupérer le "input" dans la case à coté du bouton, incrémenter son nom, et l'ajouter dans une nouvelle ligne en-dessous:
Code:
1 2 3 4 5 6
|
$("#add_author").click(function() {
var inputauthor = $(this).parent().parent().$("input");
inputauthor.attr("name", "name+1"); // name+1 à remplacer par une méthode qui récupère le nom et remplace le dernier caractère.
$(this).parent().parent().after("<tr><td></td><td>"+inputauthor+"</td><td></td></tr>");
}); |
ça marche évidemment pas....
Je suis perdu help me!!
Merci