jQuery: ajouter une ligne à la table et le sélectionner dans DOM

Question

Je souhaite ajouter une ligne à une table, puis l'utiliser comme objet DOM. Supposons que le code HTML suivant:

<table> 
    <tr class="existing-row"><td> 
     <a>add new row</a> 
    </td></tr> 
    <tr class="existing-row"><td> 
     <a>add new row</a> 
    </td></tr> 
</table> 

J'utilise le JavaScript suivant avec jQuery pour insérer une ligne:

function addNewRow(addNewRowLink) 
    { 
    var currentRow = addNewRowLink.closest('tr'); 
    currentRow.after('<tr class="added-row"><td>This is new</td></tr>'); 

    var newRowInDomTree = currentRow.next('tr'); 
    //This does not work 
    } 

La newRowInDomTree variable contient un tr.existing-row plutôt un tr.added-row. Il semble que l'arborescence DOM n'est pas mise à jour, mais je ne comprends pas pourquoi.

Des idées?

Merci à l'avance.

Answer 1

Votre code devrait fonctionner, sauf que je ne vois pas comment il s'appelle, donc je ne sais pas ce que addNewRowLink est réellement.

Une alternative serait de conserver une référence au nouvel élément lors de sa création. Comme ceci:

function addNewRow(addNewRowLink) { 
    var currentRow = addNewRowLink.closest('tr'); 
    var newRowInDomTree = $('<tr class="added-row"><td>This is new</td></tr>') 
           .insertAfter(currentRow); 
    // newRowInDomTree will be the element you created 
} 

Answer 2

Je pense que l'effet que vous êtes à la recherche peut être simplifiée en utilisant la fonction droite:

au lieu de:

currentRow.after('<tr class="added-row"><td>This is new</td></tr>'); 

vous devriez essayer:

newRowInDomTree = $('<tr class="added-row"><td>This is new</td></tr>').insertAfter(currentRow); 

J'oserais deviner que votre sélection (currentRow.next('tr')) se passe avant que l'élément est en fait ajouté à la dom. Vous pouvez essayer d'écouter un événement onload ou onreadystatechange pour voir s'il sera utilisé plus tard.

Answer 3

Que diriez-vous de faire comme ça?

$(".existing-row a").click(function() { 
newRow = $(this).parent.after('<tr class="added-row"><td>This is new</td><tr>'); 
}); 

Answer 4

Donnez un ID à la table. -à-dire,

< table id="me"> 

var iHtml = ' < tr class="added-row">< td>This is new asdasdasd< /td>< /tr>' ; 

$('#me tr:last').after('iHtml ');