Ajout dynamique de lignes de tableau à l'aide de jQuery

Question

J'ai une ligne de bas de page qui est utilisée pour ajouter de nouvelles lignes à un tableau HTML. Pour une raison quelconque, lorsque j'ajoute une nouvelle ligne, elle supprime la ligne de pied de page. Je veux que la nouvelle ligne soit ajoutée avant le pied de page.

Exemple:

Row 1 
Row 2 
Row 3 
Footer Row with Add new row button 

Lorsque le bouton Ajouter est cliqué, il devrait ressembler à ceci:

Row 1 
Row 2 
Row 3 
New Row added 
Footer Row 

Voici mon code:

function addAddHocRow(tr) { 

    $('#tblBuilder_Body tr:last').before(tr); 
} 

tr passe du bouton cliquez sur la méthode. Le code ci-dessus supprime la ligne de pied de page.

Le tr vient du bouton de lien qui est ajouté en tant que colonne de la table html dynamiquement.

function addAddHocRowLink(td) { 

    var addLink = $("<a/>").click(function() { 

     addAddHocRow($(td).parent()); 

    }).text("Add"); 

    $(td).append(addLink); 
} 

En fait, je crée un nouvel objet TR, puis je remplis les TD. Chaque td a certains éléments comme checkbox, dropdownlist etc. Et après cela, le tr est ajouté à la table.

MISE À JOUR 2:

Voici un code qui montre comment sont renseignés le tds.

var addHocRowTds = $(addHocRow).find('td'); 
// append add button 
    addAddHocRowLink(addHocRowTds[6]); 

Answer 1

Voici un jsFiddle de travail: http://jsfiddle.net/cMJ2e/1/