JQuery insère la ligne du tableau à la position

J'ai travaillé sur une solution pour pouvoir insérer une ligne dans une table html. C'était assez délicat. J'ai trouvé quelque chose qui fonctionne, mais seulement pour le premier "insert". Je ne peux pas comprendre ce que je fais mal.

Ive une table de base avec 3 colums chaque table a un bouton pour permettre l'insertion d'une rangée entre 2 rangées. Ive searhed sur ce site pour une solution et a obtenu une solution jquery qui fonctionne, c'est-à-dire lorsque j'appuie sur le bouton, il ajoute la ligne où je le veux. Mais quand j'ajoute une autre ligne après où j'ai inséré la dernière rangée, la ligne est insérée 1 position en arrière, la prochaine fois que j'appuie sur le bouton est inséré 2 rangées en arrière, etc. Je ne peux pas comprendre ce que je fais mal, on sait pourquoi ça va ce?

Encore mieux, il y a une meilleure façon de le faire? C. Ajouter une ligne dans une table à n'importe quelle position?

Code JQuery;

• Masquer la barre de défilement horizontal, mais faire défiler les pages horizontalement
• Utilisation de plusieurs directives AngularJS dans une étiquette div
• Javascript recherche et affiche les divs avec des mots-clés correspondants
• Passer à l'ancre nommée après le traitement jquery / javascript
• Comment concevoir un lecteur audio personnalisé avec HTML

<script> $(document).ready(function(){ $(".addRow").click(function(event){ //get the button id to get the row var $id=this.id; var $totrecords; var $newrow; var $totalrowsadded; //get id of clicked button $id=$id.replace("add_", ""); $totrecords=document.getElementById('totalrecords').value; $totrecords++; //store number of rows added $totalrowsadded=document.getElementById('totalrowsadded').value; $totalrowsadded++; document.getElementById('totalrowsadded').value=$totalrowsadded; //update record count document.getElementById('totalrecords').value=$totrecords; var $html='<tr class="newrow"><td>'+$totrecords+'<button type="button" class="addRow" id="add_'+$totrecords+'">add</button></td><td><label for="ProductHeight'+$totrecords+'">height</label><input name="data[Product][height'+$totrecords+']" type="text" value="0" id="ProductHeight'+$totrecords+'"/></td><td><label for="ProductWidth'+$totrecords+'">width</label><input name="data[Product][width'+$totrecords+']" type="text" value="0" id="ProductWidth'+$totrecords+'"/></td><td><label for="ProductPrice'+$totrecords+'">List Price</label><input name="data[Product][price'+$totrecords+']" type="text" id="ProductPrice'+$totrecords+'"/></td></tr>'; $newrow=parseInt($id)+1; alert('new row insert at '+$newrow); $('#productstable > tbody> tr:nth-child(' + $newrow + ')').after($html); }); }); </script> 

Ma table ressemble à ça;

 <table id="productstable"> <tr> <th>Insert</th> <th>Height</th> <th>Width</th> <th>List price</th> </tr> <tbody> <tr id="0"> <td>0 :<button type="button" class="addRow" id="add_0">add</button></td> <td><label for="ProductHeight0">height</label><input name="data[Product][height0]" type="text" value="115" id="ProductHeight0"/></td> <td><label for="ProductWidth0">width</label><input name="data[Product][width0]" type="text" value="595" id="ProductWidth0"/></td> <td><label for="ProductPrice0">List Price</label><input name="data[Product][price0]" type="text" id="ProductPrice0"/></td> </tr> <tr id="1"> <td>1 :<button type="button" class="addRow" id="add_1">add</button></td> <td><label for="ProductHeight1">height</label><input name="data[Product][height1]" type="text" value="140" id="ProductHeight1"/></td> <td><label for="ProductWidth1">width</label><input name="data[Product][width1]" type="text" value="295" id="ProductWidth1"/></td> <td><label for="ProductPrice1">List Price</label><input name="data[Product][price1]" type="text" id="ProductPrice1"/></td> </tr> <tr id="2"> <td>2 :<button type="button" class="addRow" id="add_2">add</button></td> <td><label for="ProductHeight2">height</label><input name="data[Product][height2]" type="text" value="140" id="ProductHeight2"/></td> <td><label for="ProductWidth2">width</label><input name="data[Product][width2]" type="text" value="395" id="ProductWidth2"/></td> <td><label for="ProductPrice2">List Price</label><input name="data[Product][price2]" type="text" id="ProductPrice2"/></td> </tr> <tr id="3"> <td>3 :<button type="button" class="addRow" id="add_3">add</button></td> <td><label for="ProductHeight3">height</label><input name="data[Product][height3]" type="text" value="140" id="ProductHeight3"/></td> <td><label for="ProductWidth3">width</label><input name="data[Product][width3]" type="text" value="495" id="ProductWidth3"/></td> <td><label for="ProductPrice3">List Price</label><input name="data[Product][price3]" type="text" id="ProductPrice3"/></td> </tr> </tbody> </table> 

• Impossible de charger des ressources de page avec PhantomJS
• Modification du code HTML avec Greasemonkey
• CSS externe affectant ("saignement" dans) ombre DOM avec polymère
• Obtention de valeur de plusieurs champs de saisie avec la même classe et ajout d'un objet javascript
• Affichez la boîte de dialogue "Enregistrer sous" et enregistrez le contenu d'un texte sélectionné dans textarea dans un fichier sur le PC du client

 $('#productstable TBODY').append($html); 

 $(this).closest('TR').after($html); 

 $(".button_class").closest("tr").after("<tr>... contents of row ...</tr>");