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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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